<template>
  <div class="addAgent app-container">
    <el-form
      :model="setQuery"
      ref="setQuery"
      :rules="rules"
      label-width="200px"
    >
      <el-form-item label="一级渠道类型：" prop="channelType">
        <el-select
          v-model="setQuery.channelType"
          size="small"
          clearable
          class="item-width-300"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="二级渠道类型：" prop="channelObjectId">
        <el-select
          v-model="setQuery.channelObjectId"
          size="small"
          clearable
          class="item-width-300"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道网点名称：" prop="channelName">
        <el-input
          v-model="setQuery.channelName"
          size="small"
          class="item-width-300"
        ></el-input>
      </el-form-item>
      <el-form-item label="所在地区：" prop="district">
        <el-select
          v-model="setQuery.province"
          size="small"
          clearable
          class="item-width-150"
          placeholder="请选择省"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="setQuery.city"
          size="small"
          clearable
          class="item-width-150 ml10"
          placeholder="请选择市"
        >
          <el-option
            v-for="item in cityList"
             :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="setQuery.district"
          size="small"
          clearable
          class="item-width-150 ml10"
          placeholder="请选择区"
        >
          <el-option
            v-for="item in countyList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道网点佣金：" prop="channelMainRate">
        <el-input
          v-model="setQuery.channelMainRate"
          size="small"
          placeholder="请输入渠道网点佣金比例"
          class="item-width-300"
        ></el-input>
      </el-form-item>
      <el-form-item label="渠道网点员工佣金比例：" prop="channelEmployeeRate">
        <el-input
          v-model="setQuery.channelEmployeeRate"
          size="small"
          class="item-width-300"
        ></el-input>
      </el-form-item>
      <el-form-item v-if="setQuery.channelType == 2" label="手机号：" prop="phoneNum">
        <el-input
          v-model="setQuery.phoneNum"
          :maxlength="11"
          size="small"
          class="item-width-300"
        ></el-input>
      </el-form-item>
      
    </el-form>

    <div class="btn-group">
      <el-button>取 消</el-button>
      <el-button type="primary" :loading="loading" @click="save"
        >确 定</el-button
      >
    </div>
  </div>
</template>

<script>
import { getShopType,addOrUpdate } from "@/api/user";
import {getRegion} from '@/api/payment';
import {debounce} from '@/utils/index';

export default {
  data() {
    return {
        loading:false,
      setQuery: {
         "address": "测试啊啊啊啊",
        "channelEmployeeRate": 0,
        "channelMainRate": 0,
        "channelName": "",
        "channelObjectId": "",
        "channelType": 0,
        "city": "",
        "district": "",
        "id": 0,
        "mapLat": "213",
        "mapLon": "21",
        "phoneNum": "",
        "province": ""
      },
      rules: {
        channelName: [{ required: true, message: "请输入渠道网点名称", trigger: "blur" }],
        channelType: [
          { required: true, message: "请选择一级渠道类型", trigger: "change" },
        ],
        channelObjectId: [
          { required: true, message: "请选择二级渠道类型", trigger: "change" },
        ],
        district: [
          { required: true, message: "请选择所在区域", trigger: "change" },
        ],
        channelMainRate: [
          { required: true, message: "请输入渠道网点佣金比例", trigger: "blur" },
        ],
        channelEmployeeRate: [
          { required: true, message: "请输入渠道网点员工佣金比例", trigger: "blur" },
        ],
         phoneNum: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
       
      },
      options: [
        {
            label:'商户类型',
            value:1
        },
        {
            label:'代理商渠道',
            value:2
        }
      ],
      options1:[],
      provinceList: [],//省
      cityList: [],//市
      countyList: [],//区
    };
  },
  watch: {
    'setQuery.province':debounce(function(val) {
      if(val){
        this.getRegion('city',val)
      }
      this.setQuery.city = ''
      this.setQuery.district = ''
      this.cityList = []
      this.countyList = []
    }),
    'setQuery.city':debounce(function(val) {
      if(val){
        this.getRegion('county',val)
      }
       this.setQuery.district = ''
        this.countyList = []
    }),
  },
  methods: {
    // 获取地区数据
    getRegion(type,name=''){
      getRegion({type,name,code:''}).then(res=>{
        if (res.state == "Success") {
          this[type+'List'] = res.content
        }
      })
    },
    getShopType() {
      getShopType().then((res) => {
        if (res.state == "Success") {
          for (const key in res.content) {
            if (Object.hasOwnProperty.call(res.content, key)) {
              this.options1.push({
                value: key,
                label: res.content[key],
              });
            }
          }
        }
      });
    },
     save() {
         this.$refs.setQuery.validate((v) => {
             if (v) {
            this.loading = true;
          addOrUpdate(this.setQuery).then((res) => {
            this.loading = false;
            if (res.state == "Success") {
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
              });
              this.setQuery = {
                "address": "",
                "channelEmployeeRate": 0,
                "channelMainRate": 0,
                "channelName": "",
                "channelObjectId": "",
                "channelType": 0,
                "city": "",
                "district": "",
                "id": 0,
                "mapLat": "",
                "mapLon": "",
                "phoneNum": "",
                "province": ""
              };
              this.$router.push("/userManage/agentManage/index");
            }
          });
        }
      });
    },
  },

  created() {
    this.getShopType();
    this.getRegion('province');

  },
};
</script>

<style lang="scss" scoped>
.addAgent {
     padding-bottom: 40px;
  .btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>