<template>
  <div class="app-container">
    <el-form class='el_form' ref="form" label-width="100px">
      <el-form-item label="排序">
           <el-input
                  v-model="goodsDate.Sort"
                  placeholder=""
                  style="width: 70%"
                ></el-input>
         </el-form-item>
      <el-form-item label="模板名称">
         <el-input
                  v-model="goodsDate.Name"
                  placeholder=""
                  style="width: 70%"
                ></el-input>
           </el-form-item>
      <el-form-item label="是否默认">
         <el-radio-group v-model="goodsDate.IsDefault">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
       <el-form-item label="计费方式">
         <el-radio-group v-model="goodsDate.ChargeType">
          <el-radio :label="1">按重量</el-radio>
          <el-radio :label="2">按数量</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="配送区域">
        <el-row :gutter="24" style="margin: 0">
          <el-col :span="24" style="border-left: 2px solid #fff">
            <div class="tablessst">
              <p class="col_p">配送到</p>
              <p class="col_pr">首件/重(个/克)</p>
              <p class="col_pr">运费(元)</p>
              <p class="col_pr">续费/重(个/克)</p>
              <p class="col_pr">续费(元)</p>
              <p class="col_pr">管理</p>
            </div>
            <div
              v-for="(item, index) in goodsDate.Dispatching"
              :key="index"
              class="tablessst"
            >
              <p class="col_p">
                <el-input
                  v-model="item.a"
                  placeholder=""
                  style="width: 80%"
                  disabled
                >
                  <template slot="prepend">
                    <span v-if="index == 0">[默认]</span>
                    <span v-else @click="opendias(item.a, 0, index)">选择</span>
                  </template>
                </el-input>
              </p>
              <p class="col_pr">
                <el-input
                  v-model="item.f"
                  placeholder=""
                  style="width: 70%"
                ></el-input>
              </p>
              <p class="col_pr">
                <el-input
                  v-model="item.fp"
                  placeholder=""
                  style="width: 70%"
                ></el-input>
              </p>
              <p class="col_pr">
                <el-input
                  v-model="item.n"
                  placeholder=""
                  style="width: 70%"
                ></el-input>
              </p>
              <p class="col_pr">
                <el-input
                  v-model="item.np"
                  placeholder=""
                  style="width: 70%"
                ></el-input>
              </p>
              <p class="col_pr">
                <el-button
                  icon="el-icon-close"
                  style="margin-left: 10px"
                  @click="deletearrinput(index)"
                  v-if="index > 0"
                ></el-button>
              </p>
            </div>

            <el-button
              @click="addguild()"
              icon="el-icon-plus"
              style="margin-top: 20px"
            >
              添加参数</el-button
            >
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="不配送区域">
          <el-input
            v-model="goodsDate.Disdispatching"
            placeholder=""
            style="width: 80%"
            disabled
          >
            <template slot="prepend">
              <span @click="opendias(goodsDate.Disdispatching, 1, 99)"
                >选择</span
              >
            </template>
          </el-input>
      </el-form-item>
       <el-form-item label="状态">
         <el-radio-group v-model="goodsDate.Publish">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-button class="btns" type="primary" @click="handleinfomationclick()">提 交</el-button
    >
    </el-form>

    <el-dialog title="选择不配送省" :visible.sync="dialogVisible" width="30%" append-to-body>
      <div>
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="(item, index) in arrlist"
            :key="index"
            :label="item.lable"
            :disabled="item.value"
          ></el-checkbox>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="btndisabled()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { addFreight } from '@/api/module/freight'
export default {
  name: "goodsmeter",
  props: {
    option: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      arrlist: [
        { lable: "全国", value: true },
        { lable: "北京", value: false },
        { lable: "上海", value: false },
        { lable: "天津", value: false },
        { lable: "重庆", value: false },
        { lable: "四川", value: false },
        { lable: "贵州", value: false },
        { lable: "云南", value: false },
        { lable: "西藏", value: false },
        { lable: "河南", value: false },
        { lable: "湖北", value: false },
        { lable: "湖南", value: false },
        { lable: "广东", value: false },
        { lable: "广西", value: false },
        { lable: "陕西", value: false },
        { lable: "甘肃", value: false },
        { lable: "青海", value: false },
        { lable: "宁夏", value: false },
        { lable: "新疆", value: false },
        { lable: "河北", value: false },
        { lable: "山西", value: false },
        { lable: "内蒙古", value: false },
        { lable: "江苏", value: false },
        { lable: "浙江", value: false },
        { lable: "安徽", value: false },
        { lable: "福建", value: false },
        { lable: "江西", value: false },
        { lable: "山东", value: false },
        { lable: "辽宁", value: false },
        { lable: "吉林", value: false },
        { lable: "黑龙江", value: false },
        { lable: "海南", value: false },
        { lable: "台湾", value: false },
        { lable: "香港", value: false },
        { lable: "澳门", value: false },
      ],
      btnindex:'',
      checkList: [], //当前选择
      disabledate: [], //不能选择
      dialogVisible: false,
      goodsDate: {
        Id:0,
        Sort: 0,
        Name: "0",
        IsDefault: 0,
        ChargeType: 0,
        Dispatching: [
          { a: "全国", f: 500, fp: 10, n: 100, np: 5 }
        ],
        Disdispatching: "",
        Publish: 0,
      },
    };
  },
  components: {},
  mounted() {
    this.info();
  },
  methods: {
    btndisabled(){
      let checkListString = '';
      if(this.btnindex == 99){
        checkListString = this.checkList.join();
        if(checkListString.substr(0,1) === ',') {
          checkListString = checkListString.slice(1);
        }
        this.goodsDate.Disdispatching = checkListString;
      }else{
         this.goodsDate.Dispatching[this.btnindex].a = this.checkList.join()
      }
      this.dialogVisible = false
    },
    unique (obj, ary){
      return obj.filter(function(item){
          return ary.indexOf(item) == -1;
      })

    },
    opendias(type, i, index) {

      this.goodsDate.Dispatching.forEach((element) => {
        let arrd = element.a.split(',')
        for(let i=0;i<arrd.length;i++){
          this.disabledate.push(arrd[i]);
        }
      });
      let arr = this.goodsDate.Disdispatching.split(',');
      for(let i=0;i<arr.length;i++){
        this.disabledate.push(arr[i]);
      }
      this.btnindex = index;
      this.arrlist.forEach(item =>{
            item.value = false;
      })
      this.checkList = type.split(",");

      let disabledates = JSON.parse(JSON.stringify(this.disabledate)); //可以将json对象转换成json对符串
      let disabarr = this.unique(disabledates,this.checkList) //去掉当前选择的disabled效果
      this.arrlist.forEach(item =>{
         if (disabarr.includes(item.lable)) {
            item.value = true
          }
      })

      this.dialogVisible = true;
    },
    handleinfomationclick() {//提交
      this.goodsDate.Dispatching.forEach(item=>{
        item.fp= Number(item.fp*100).toFixed();
        item.np = Number(item.np*100).toFixed();
      })
      this.loading = true
      addFreight(this.goodsDate).then(res => {
        //console.log(275,res);
        if(res.code === 1) {
          this.$emit("closeIndexbtn",false);
          if(this.goodsDate.Id === 0) {
            this.$message({ message: '新增成功', type: 'success'});
          }else {
            this.$message({ message: '修改成功', type: 'success'});
          }
        }
        this.loading = false;
      });
    },
    addguild() {
      //添加
      let arrchild = {
        a: "",
        f: "",
        fp: "",
        n: "",
        np: "",
      };
      this.$set(
        this.goodsDate.Dispatching,
        this.goodsDate.Dispatching.length,
        arrchild
      );
    },
    deletearrinput(index) {
      //删除
      this.goodsDate.Dispatching.splice(index, 1);
    },
    info() {
      this.goodsDate = this.option
    },
  },
};
</script>
<style scoped>
.app-container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background: #f8f8f8;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.el_form{
  width:1200px;
  margin:0 auto;
}
.ullist {
  border: 1px solid #e7eaec;
  padding: 10px;
  margin-bottom: 10px;
}
.el-input-group {
  width: calc(100% - 60px);
}
.col_p {
  width: 20%;
  float: left;
  text-align: center;
  /* margin:0; */
}
.col_pr {
  width: 15%;
  float: left;
  text-align: center;
  /* margin:0; */
}
.tablesss {
  height: 70px;
  border-bottom: 1px solid #e6ebf5;
}
.tablessst {
  height: 70px;
  border-bottom: 1px solid #e6ebf5;
}
.btns{
  width:180px;
  margin:0 auto;
  display: block;
}
</style>
