<template>
  <div class="electronFaceSheet">
    <div class="el-card__header">
      <span>电子面单</span>
      <div style="display: flex;flex-direction: row;align-items: center">
        <el-button type="primary" class="el-button--small" @click="dialogFormVisible=true">设置默认发件人信息</el-button>
        <el-button type="primary" class="el-button--small" @click="add">新增</el-button>

      </div>
    </div>
    <div class="search_s">
      <div class="input-item">
        <el-input placeholder="请输入搜索内容" v-model="msg.Name" style="width: 300px;font-size: 10px;height: 32px">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
    </div>
    <div class='table-body'>
      <el-table
        :data="list"
        border
        style="width: 1707px">
        <el-table-column
          fixed
          prop="ExpressName"
          label="快递公司"
          width="100">
        </el-table-column>

        <el-table-column
          fixed
          prop="WebDot"
          label="网点名称"
          width="279">
        </el-table-column>

        <el-table-column
          fixed
          prop="WebCode"
          label="网点编码"
          width="276">
        </el-table-column>

        <el-table-column
          fixed
          prop="Account"
          label="客户号"
          width="276">
        </el-table-column>

        <el-table-column
          fixed
          label="发件人信息"
          width="500">
          <template slot-scope="scope">
            <div>{{'名称：' + scope.row.Name }}</div>
            <div>{{'联系方式：'+scope.row.Mobile}}</div>
            <div>{{'地址：'+scope.row.Address}}</div>
          </template>
        </el-table-column>




        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top" >
              <img src="../../assets/img/setup/edit.png" alt="" class="imgstyle" @click="Edit(scope.row)">
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top" >
              <img src="../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b(scope.row)">
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:right" background @current-change="handleCurrentChange"
                     v-if="list&&list.length>0" :current-page.sync="msg.pageIndex"
                     layout="total,prev, pager, next" :page-size="msg.pageSize" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="默认发件人信息" :visible.sync="dialogFormVisible"  >
      <el-form :model="moren" :rules="rules" ref="moren" label-width="100px">
        <el-form-item label="发件人公司">
          <el-input v-model="moren.Company" />
        </el-form-item>

        <el-form-item label="发件人名称" prop="Name" class="is-required">
          <el-input v-model="moren.Name" />
        </el-form-item>

        <el-form-item label="发件人电话" prop="Mobile" class="is-required">
          <el-input v-model="moren.Mobile" 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="moren.Phone" 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="moren.Email" />
        </el-form-item>
        <el-form-item label="发件人地区" prop="position" class="is-required" >
          <el-cascader v-model="moren.position" placeholder="请选择"  :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="moren.Address" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Addto('moren')">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "electronFaceSheet",
      data(){
          return{
            msg:{
              pageIndex:1,
              pageSize:20,
              Name:'',
            },
            provinceList: [],     //省市县列表
            props: {value: 'value', children: 'cities'},
            rules: {
              Name:[
                {required: true, message: "发件人名称不能为空", trigger: "blur"}
              ],
              Mobile:[
                {required: true, message: "发件人电话不能为空", trigger: "blur"}
              ],
              Address:[
                {required: true, message: "发件人地址不能为空", trigger: "blur"}
              ],
              position:[
                { type: 'array', required: true, message: '请选择发件人地区', trigger: 'change' }
              ],
            },
            moren:{
              ID:0,
              Company:'',
              Name:'',
              Mobile:'',
              Phone:'',
              Email:'',
              Address:'',
              ProvinceId:'',
              CityId:'',
              DistrictId:'',
              position:[],

            },
            list:[],
            total:0,
            dialogFormVisible:false
          }
      },
      methods:{
        getElectronicSheetPage(){
          this.apipost("/api/MallBase/GetElectronicSheetPage",this.msg , res => {
            if (res.data.resultCode == 1) {
              this.list = res.data.data.pageData;
              this.total = res.data.data.count;
            } else {
              this.Info(res.data.message);
            }
          })
        },
        search(){
          this.msg.pageIndex=1;
          this.msg.pageSize=20;
          this.getElectronicSheetPage()
        },
        Edit(row){
          this.$router.push({
            name: 'addElectronFaceSheet',
            query: {
              ID:row.ID,
              blank: "y"
            }
          });
        },
        delete_b(row){
          let that=this;
          that.Confirm("是否删除?", function () {
            that.apipost(
              "/api/MallBase/DelElectronicSheet",
              {ID:row.ID},
              res => {
                if (res.data.resultCode == 1) {
                  that.Success(res.data.message);
                  that.getElectronicSheetPage();
                } else {
                  that.Error(res.data.message);
                }
              },
            );
          });
        },
        add(){
          this.$router.push('/addElectronFaceSheet');

        },
        Addto(formName){
          this.moren.ProvinceId = this.moren.position[0];
          this.moren.CityId = this.moren.position[1];
          this.moren.DistrictId = this.moren.position[2];
          this.$refs[formName].validate((valid) => {
            if (valid) {
              delete this.moren.position //删除position 不传到后台
              // this.apipost("/api/MallBase/SetLogisticsElectronicSheet",this.moren , res => {
              //   if (res.data.resultCode == 1) {
              //     this.Success(res.data.message);
              //     this.dialogFormVisible=false
              //
              //   } else {
              //     this.Info(res.data.message);
              //   }
              // })
            } else {
              return false;
            }
          });
        },

        handleCurrentChange(val){
          this.msg.pageIndex = val;
          this.getLogisticsDeliveryPage();
        },
        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.getElectronicSheetPage()
        this.getPosition(null)
      },

    }
</script>

<style scoped>
  .electronFaceSheet .el-card__header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #fff;
  }
  .electronFaceSheet .el-button--small{
    padding: 9px 15px;
  }
  .electronFaceSheet .table-body{
    padding: 0 20px 20px;
    background-color: #fff;
    margin-bottom: 20px;
  }
  .electronFaceSheet .search_s{
    width: 100%;
    padding: 18px 20px;
    background: white;
    margin-top: 15px
  }
  .electronFaceSheet .input-item{
    width: 250px;
    margin: 0 0 20px;
  }
</style>
