<template>
  <div style="margin:0 16px 20px 16px">
    <div class="container normal-panel" style="padding-left:0">
      <slot name="save"></slot>
    </div>
    <div style="overflow-x:hidden">
      <el-row :gutter="50">
        <el-col :span="9">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <p class="font-16">分配规则</p>
            </div>
            <div class="normal-margin">
              <div class="switch" style="display:flex">
                <p class="font-16" style="font-size:14px">自动分配:&emsp;</p>
                <el-switch
                  v-model="form.autodistribution"
                  :active-value="1"
                  :inactive-value="0"
                  @change="updateOrderclueruleMain">
                </el-switch>
              </div>
              <div style="margin-top:10px">
                <el-radio class="normal-margin" :disabled="!form.autodistribution">默认按业务员指定负责省市县分配</el-radio>
                <el-radio-group v-model="radio" :disabled="!form.autodistribution" @change="radioChange">
                  <el-radio class="normal-margin" label="distributionbyagentaddress">按经销商档案属地省市县分配</el-radio>
                  <el-radio class="normal-margin" label="distributionbyagentauthority">按经销商指定负责省市县分配</el-radio>
                </el-radio-group>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="15">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <p class="font-16">到期规则</p>
            </div>
            <div class="normal-margin" style="padding-bottom:35px">
              <el-row>
                <el-col :span="12">
                  <p class="normal-margin font-16" style="font-size:14px">未分配到期时间:</p>
                  <div class="flex-align-center">
                    <p style="color:#666;font-size:14px;margin-right:10px">设置周期(天)</p>
                    <el-input size="small" @keyup.enter.native="updateOrderclueruleMain" placeholder="设置周期(天)" v-model="form.cluelife" style="width:200px"></el-input>
                  </div>
                </el-col>
                <el-col :span="12">
                  <p class="normal-margin font-16" style="font-size:14px">已分配待跟进撤回时间:</p>
                  <div class="flex-align-center">
                    <p style="color:#666;font-size:14px;margin-right:10px">设置周期(天)</p>
                    <el-input size="small" @keyup.enter.native="updateOrderclueruleMain" placeholder="设置周期(天)" v-model="form.linklife"  style="width:200px"></el-input>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form:{
        "sat_orderclueruleid":0,
        "autodistribution":true,
        "cluelife":11,
        "linklife":11,
        "distributionbysalerauthority":1
      },
      radio:'distributionbyagentauthority'
    }
  },
  methods:{
    async queryOrdercluerule () {
      const res = await this.$api.requested({
        "classname":"webmanage.saletool.orderclue.ordercluerule",
        "method": "queryOrdercluerule",
        "content": {
        }
      })
      this.radio = res.data.distributionbyagentaddress === 1?'distributionbyagentaddress':'distributionbyagentauthority'
      this.form = res.data
    },
    async updateOrderclueruleMain () {
      const res = await this.$api.requested({
        "classname":"webmanage.saletool.orderclue.ordercluerule",
        "method": "updateOrderclueruleMain",
        "content": this.form
      })
      this.tool.showMessage(res,this.queryOrdercluerule)
    },
    radioChange (val) {
      switch (val) {
        case 'distributionbyagentaddress':
          this.form.distributionbyagentaddress = 1
          this.form.distributionbyagentauthority = 0
          break;
      
        default:
          this.form.distributionbyagentaddress = 0
          this.form.distributionbyagentauthority = 1
          break;
      }
      this.updateOrderclueruleMain()
    }
  },
  mounted () {
    this.queryOrdercluerule()
  }
}

</script>
<style>
</style>
<style scoped>
.flex{
  display: flex;
  align-items: flex-start;
}
.font-16 {
  font-size: 16px;
  color: #666;
}
.text-small{
  font-size: 14px;
  margin-top:-4px;
  color: #606266;
}
/deep/.el-card__body {
  padding-bottom: 0;
}
</style>