<template>
  <div>
    <div class="container normal-panel normal-margin">
      <slot name="save"></slot>
    </div>
    <div style="overflow-x:hidden">
      <el-row :gutter="16">
        <el-col :span="9">
          <div style="height:170x" class="container normal-panel normal-margin">
            <p class="normal-title normal-margin">分配规则</p>
            <div class="flex-align-center normal-margin">
              <p>自动分配&emsp;</p>
              <el-switch
                v-model="form.autodistribution"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </div>
            <div class="flex">
              <div>
                <p class="normal-margin text-small">经销商分配规则:</p>
                <div>
                  <el-radio-group v-model="radio" @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>
              <div style="flex:1 0 auto">
                <p class="normal-margin text-small">业务员分配规则:</p>
                <p class="text-small">按业务员指定负责省市县分配</p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="15">
          <div style="height:172px" class="container normal-panel normal-margin">
            <p class="normal-title normal-margin">到期规则</p>
            <el-row :gutter="20">
              <el-col :span="12">
                <p style="color:#666;font-size:14px" class="normal-margin">未分配到期时间</p>
                <div class="flex-align-center">
                  <p style="width:100px;">设置周期(天)</p>
                  <el-input size="small" placeholder="设置周期(天)" v-model="form.cluelife" style="width:200px"></el-input>
                </div>
              </el-col>
              <el-col :span="12">
                <p style="color:#666;font-size:14px" class="normal-margin">已分配待跟进撤回时间</p>
                <div class="flex-align-center">
                  <p style="width:100px;">设置周期(天)</p>
                  <el-input size="small" placeholder="设置周期(天)" v-model="form.linklife"  style="width:200px"></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
        </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;
      }
    }
  },
  mounted () {
    this.queryOrdercluerule()
  }
}

</script>
<style>
</style>
<style scoped>
.flex{
  display: flex;
  align-items: flex-start;
}
.text-small{
  font-size: 14px;
  margin-top:-4px;
  color: #606266;
}
</style>