<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.is_default">
          <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.charge_type">
          <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=""
                  @keyup.native="item.f = proving(item.f)"
                  style="width: 70%"
                ></el-input>
              </p>
              <p class="col_pr">
                <el-input
                  v-model="item.fp"
                  placeholder=""
                  @keyup.native="
                  item.fp = oninput(item.fp)"
                  style="width: 70%"
                ></el-input>
              </p>
              <p class="col_pr">
                <el-input
                  v-model="item.n"
                  placeholder=""
                  @keyup.native="item.n = proving(item.n)"
                  style="width: 70%"
                ></el-input>
              </p>
              <p class="col_pr">
                <el-input
                  v-model="item.np"
                  placeholder=""
                  @keyup.native="
                  item.np = oninput(item.np)"
                  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.dis_dispatching"
            placeholder=""
            style="width: 80%"
            disabled
          >
            <template slot="prepend">
              <span @click="opendias(goodsDate.dis_dispatching, 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="isPostageTitle" :visible.sync="dialogVisible" width="30%" append-to-body
               :close-on-click-modal="false" center >
      <div>
        <el-checkbox-group v-model="checkList" class="spe-checkbox-group-con">
          <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" size="small">取 消</el-button>
        <el-button type="primary" @click="btndisabled()" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { addFreight, updateFreight} 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,
      isPostageTitle: '',
      goodsDate: {
        id:0,
        sort: 0,
        name: "0",
        is_default: 0,
        charge_type: 0,
        dispatching: [
          { a: "全国", f: 500, fp: 0, n: 100, np: 0 }
        ],
        dis_dispatching: "",
        publish: 0,
      },
    };
  },
  components: {},
  mounted() {
    this.info();
  },
  methods: {
    btndisabled(){
      debugger
      let checkListString = '';
      if (this.btnindex == 99) {
        checkListString = this.checkList.join();
        if (checkListString.substr(0, 1) === ',') {
          checkListString = checkListString.slice(1);
        }
        this.goodsDate.dis_dispatching = checkListString;
      } else {
        for(let i = 0; i < this.checkList.length; i++) {
          if(this.checkList[i] == '') {
            this.checkList.splice(i,1)
            i--
          }
        }
        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;
      })

    },
    /** 选择 配送区域
     * i=0,配送区域；i= 1，是不配送区域
     * */
    opendias(type, i, index) {

      this.isPostageTitle = ''
      if (i == 0) {
        this.isPostageTitle = '选择配送区域'
      }
      if (i == 1) {
        this.isPostageTitle = '选择不配送区域'
      }

      // 初始化 已经勾选的区域(包含，不配送 和 配送的)
      this.disabledate = [];

      this.goodsDate.dispatching.forEach((element) => {
        if(element.a && element.a != '') {
          let arrd = element.a.split(',')
          for (let i = 0; i < arrd.length; i++) {
            this.disabledate.push(arrd[i]);
          }
        }
      });

      let arr = this.goodsDate.dis_dispatching.split(',');
      for (let i = 0; i < arr.length; i++) {
        this.disabledate.push(arr[i]);
      }

      this.btnindex = index;
      // 将全部 省的状态初始化为 未选中
      this.arrlist.forEach(item => {
        item.value = false;
      })

      // 已经选择过的 区域 array
      this.checkList = type.split(",");

      // 所有已经勾选的 区域
      let disabledates = JSON.parse(JSON.stringify(this.disabledate));
      // 已经勾选的  配送区域
      let disabarr = this.unique(disabledates, this.checkList)
      this.arrlist.forEach(item => {
        if (disabarr.includes(item.lable)) {
          item.value = true
        }
      })

      this.dialogVisible = true;
    },
    /** 运费模板 修改/新增 的保存  */
    handleinfomationclick() {
      let isGone = true;
      if( this.goodsDate.name == '' || !this.goodsDate.name.trim() ) {
        this.$message({type:'warning',message:'模板名称不能为空,且不能包含特殊字符，请重新命名'});
        return;
      }

      // charge_type
      if (this.goodsDate.charge_type == 0) {
        this.$message({type:'warning',message:'请选择计费方式'});
        return;
      }

      if(this.goodsDate.dispatching.length && this.goodsDate.dispatching.length > 0) {
        for(let i = 0; i < this.goodsDate.dispatching.length;i++) {
          if(this.goodsDate.dispatching[i].a == '') {
            isGone = false
            break;
          }
        }

        if(!isGone) {
          this.$message({type:'warning',message: '配送区域不能为空'});
          return;
        }
      }

      this.goodsDate.dispatching.forEach(item=>{
        item.fp= Number(item.fp*100).toFixed(2);
        item.np = Number(item.np*100).toFixed(2);
      })

      //console.log(111,this.goodsDate);

      // 新增 运费模板
      if(this.goodsDate.id == 0) {
        addFreight(this.goodsDate).then(res => {
          if(res.code == 1) {
            this.$emit("closeIndexbtn",false);
            this.$message({ message: '新增成功', type: 'success'});
          }else {
            this.goodsDate.dispatching.forEach(item=>{
              item.fp= Number(item.fp/100)
              item.np = Number(item.np/100)
            })
            this.$message({type:'error',message: res.message ? res.message : '新增失败'});
          }
        });
      }else { // 否则 是修改
        updateFreight(this.goodsDate).then(res=> {
          if(res.code == 1) {
            this.$emit("closeIndexbtn",false);
            this.$message({ message: '修改成功', type: 'success'});
          }else {
            this.goodsDate.dispatching.forEach(item=>{
              item.fp= Number(item.fp/100)
              item.np = Number(item.np/100)
            })
            this.$message({type:'error',message: res.message ? res.message : '修改失败'});
          }
        });
      }


    },
    /** 配送区域  添加参数 操作 */
    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
      this.goodsDate.dispatching.forEach(item=>{
        item.fp= Number(item.fp/100)
        item.np = Number(item.np/100)
      })
    },
    oninput(value) {
      let str = value;
      let len1 = str.substr(0, 1);
      let len2 = str.substr(1, 1);
      //如果第一位是0，第二位不是点，就用数字把点替换掉
      if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1);
      }
      //第一位不能是.
      if (len1 == ".") {
        str = "";
      }
      if (len1 == "+") {
        str = "";
      }
      if (len1 == "-") {
        str = "";
      }

      //限制只能输入一个小数点
      if (str.indexOf(".") != -1) {
        let str_ = str.substr(str.indexOf(".") + 1);
        if (str_.indexOf(".") != -1) {
          str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
        }
      }
      //正则替换
      str = str.replace(/[^\d^\.]+/g, ""); // 保留数字和小数点
      str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, "$1"); // 小数点后只能输 2 位
      return str;
    },
    proving(e) {
      let str = e;
      let len1 = str.substr(0, 1);
      let len2 = str.substr(1, 1);
      //如果第一位是0，第二位不是点，就用数字把点替换掉
      if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 0);
      }
      str = str.replace(/[^\.\d]/g,'');
      str = str.replace('.','');
      return str
},
  },
};
</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;
}

.spe-checkbox-group-con {
  margin-left: 20px;
}

.spe-checkbox-group-con >>> .el-checkbox {
  width: 70px;
  margin: 0 6px 5px;
}
</style>
