<template>
  <div class="addElectronFaceSheet">
    <div class="form-box" style="margin-top: 0">
      <div>
        <span style="color: rgb(64, 158, 255);cursor: pointer;margin-left: 20px" @click="cancel">电子面单打印</span>
        <span style="margin: 0 5px;color: #C0C4CC;">/</span>
        <span>电子面单打印编辑</span>
      </div>
    </div>
    <div id="pane-first">
      <div class="form-box">
        <el-form :model="msg" style="padding:0 50px;" :rules="rules" ref="msg" label-width="150px">
          <el-form-item label="选择快递公司" class="is-required" prop="ExpressId">
            <el-select v-model="msg.ExpressId" placeholder="请选择" class="el-input--small">
              <el-option
                v-for="item in ExpressList"
                :key="item.ID"
                :label="item.Name"
                :value="item.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否订阅短信 " >
            <el-tooltip class="item" effect="dark" content="快递鸟付费用户专享功能" placement="top"
                        style="position: absolute;left: -10px;top:13px">
              <i class="el-tooltip el-icon-info"></i>
            </el-tooltip>
            <el-switch
              style="margin-left: 10px"

              :active-value="1"
              :inactive-value="0"
              v-model="msg.IsSubscribeSMS"
              active-text=""
              inactive-text="">
            </el-switch>
          </el-form-item>
          <el-form-item label="是否打印商品 ">
            <el-tooltip class="item" effect="dark" content="打印商品信息" placement="top"
                        style="position: absolute;left: -10px;top:13px">
              <i class="el-tooltip el-icon-info"></i>
            </el-tooltip>
            <el-switch
              style="margin-left: 10px"
              :active-value="1"
              :inactive-value="0"
              v-model="msg.IsPrintGoods"
              active-text=""
              inactive-text="">
            </el-switch>
          </el-form-item>

          <el-form-item label="电子面单客户账号" >
            <el-input v-model="msg.Account" placeholder="与快递网点申请" class="el-input--small"/>
          </el-form-item>
          <el-form-item label="电子面单密码" >
            <el-input v-model="msg.Password" class="el-input--small"/>
          </el-form-item>
          <el-form-item label="月结编码" >
            <el-input v-model="msg.MonthlyCode" class="el-input--small"/>
          </el-form-item>
          <el-form-item label="网点编码" >
            <el-input v-model="msg.WebCode" class="el-input--small"/>
          </el-form-item>
          <el-form-item label="网点名称" >
            <el-input v-model="msg.WebDot" class="el-input--small"/>
          </el-form-item>
          <el-form-item label="发件人公司" >
            <el-input v-model="msg.Company" class="el-input--small"/>
          </el-form-item>
          <el-form-item label="发件人名称" prop="Name">
            <el-input v-model="msg.Name" class="el-input--small is-required"/>
          </el-form-item>
          <el-form-item label="发件人电话" prop="Mobile">
            <el-input v-model="msg.Mobile" class="el-input--small is-required" step="1"  min="0" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"/>
          </el-form-item>
          <el-form-item label="发件人手机" >
            <el-input v-model="msg.Phone" class="el-input--small" step="1"  min="0" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"/>
          </el-form-item>
          <el-form-item label="发件人邮编" >
            <el-input v-model="msg.Email" class="el-input--small"/>
          </el-form-item>

          <el-form-item label="发件人地区" prop="position" class="is-required" >
            <el-cascader v-model="msg.position" :placeholder="addressName"  :options="provinceList" @active-item-change="handleItemChange" :props="props" style="width: 100%"></el-cascader>
          </el-form-item>
          <el-form-item label="发件人地址" prop="Address" class="is-required">
            <el-input v-model="msg.Address" />
          </el-form-item>
        </el-form>
      </div>
      <el-button type="primary" style="margin: 12px 0 " @click="preserve('msg')">保存</el-button>
      <el-button style="margin: 12px 0 " @click="cancel">取消</el-button>
    </div>
    </div>
</template>

<script>
    export default {
        name: "addElectronFaceSheet",
      data(){
          return{
            msg:{
              ID:0,
              ExpressId:'',
              IsSubscribeSMS:0,
              IsPrintGoods:0,
              Account:'',
              Password:'',
              MonthlyCode:'',
              WebCode:'',
              WebDot:'',
              Company:'',
              Name:'',
              Mobile:'',
              Phone:'',
              Email:'',
              ProvinceId:'',
              CityId:'',
              DistrictId:'',
              Address:'',


              position:[]
            },
            addressName:'请选择地区',
            ExpressList:[],
            rules:{
              ExpressId:[
                {required: true, message: "快递公司不能为空", trigger: "blur"}
              ],
              Name:[
                {required: true, message: "发件人名称不能为空", trigger: "blur"}
              ],
              Mobile:[
                {required: true, message: "发件人电话不能为空", trigger: "blur"}
              ],
              position:[
                { type: 'array', required: true, message: '请选择发件人地区', trigger: 'change' }
              ],
              Address:[
                {required: true, message: "发件人地址不能为空", trigger: "blur"}
              ],
            },
            provinceList: [],     //省市县列表
            props: {value: 'value', children: 'cities'},
          }
      },
      created(){
        if(this.$route.query.ID){
          this.getLogisticsDelivery(this.$route.query.ID)
        }
      },
      methods:{
        cancel(){
          this.$router.go(-1);//返回上一层

        },
        getLogisticsDelivery(ID){
          this.apipost("/api/MallBase/GetElectronicSheet",{'ID':ID} , res => {
            if (res.data.resultCode == 1) {
              this.msg =res.data.data
              this.msg.position =[res.data.data.ProvinceId,res.data.data.CityId,res.data.data.DistrictId]
              this.addressName = res.data.data.ProvinceName+'/'+res.data.data.CityName+'/'+res.data.data.DistrictName
            } else {
              this.Info(res.data.message);
            }
          })
        },
        getExpressInfo(){
          this.apipost("/api/MallBase/GetExpressInfo",{} , res => {
            if (res.data.resultCode == 1) {
              this.ExpressList = res.data.data
            } else {
              this.Info(res.data.message);
            }
          })
        },
        preserve(formName){
            this.msg.ProvinceId = this.msg.position[0];
            this.msg.CityId = this.msg.position[1];
            this.msg.DistrictId = this.msg.position[2];

          this.$refs[formName].validate((valid) => {
            if (valid) {
              delete this.msg.position //删除position 不传到后台
              this.apipost("/api/MallBase/AddOrUpdateElectronicSheet",this.msg , res => {
                if (res.data.resultCode == 1) {
                  this.Success(res.data.message);
                  this.$router.go(-1);//返回上一层

                } else {
                  this.Info(res.data.message);
                }
              })
            } else {
              return false;
            }
          });
        },
        getPosition(val, cb) {

          let vm = this; //查询省市县
          let params = {};
          if(!val) { //初始化加载 获取所有省份数据
            params = {Id:2}
          } else if (val.length === 1) { //加载二级  获取市级数据
            params = {Id: val[0]}
          } else {  //加载3级   获取县级数据
            params = {Id: val[1]}
          }

          this.apipost("/api/Destination/GetChildList",params , res => {
            if (res.data.resultCode == 1) {
              if(!val) { //初始化加载   查询省份数据
                vm.provinceList = res.data.data.map((e) => {
                  return {value: e.ID, label: e.Name, cities: []}
                });
              } else if (val.length === 1) { //加载二级    查询该省下市级数据
                vm.provinceList.map((item) => {
                  if(item.value === val[0]) {
                    item.cities = res.data.data.map((e) => {
                      return {value: e.ID, label: e.Name, cities: []}
                    })
                  }
                })
              } else {  //加载3级   查询该省市下县级数据
                vm.provinceList.map((item) => {
                  if(item.value === val[0]) {
                    item.cities.map((value) => {
                      if(value.value === val[1]){
                        value.cities = res.data.data.map((e) => {
                          return {value: e.ID, label: e.Name}
                        })
                      }
                    })
                  }
                })
              }
              cb&&cb(res);
            } else {
              // this.Info(res.data.message);
            }
          })

        },
        handleItemChange (val) {
          this.getPosition(val)
        },
      },
      mounted(){
        this.getExpressInfo() //快递公司的请求
        this.getPosition(null) //地址的请求

      }
    }
</script>

<style scoped>
  .addElectronFaceSheet .form-box {
    background: #fff;
    padding: 20px 50% 20px 0;
    margin-top: 10px;
  }
  .addElectronFaceSheet .el-input--small .el-input__inner{
    height: 32px;
    line-height: 32px;
  }
</style>
