<template>
    <basic-container>
        <div class="avue-crud">
            <el-row  v-if="!search">
                <!-- 查询模块 -->
                <el-form :inline="true" :model="query" class='fr-fo'>
                    <!-- 查询按钮 -->
                    <el-form-item class='el-btn'>
                        <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
                        <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>

                <div class="avue-crud__header">
                    <!-- 头部左侧按钮模块 -->
                    <div class="avue-crud__left">
                        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加预约</el-button>
                        <el-button v-if="this.query.reservationStatus==='1'" type="danger" icon="el-icon-delete" @click="handleConfirmReservations" plain>批量确认
                        </el-button>
                        <el-button v-if="this.query.reservationStatus==='2'" type="danger" icon="el-icon-delete" @click="handleStockUp" plain>批量转备货</el-button>
                        <el-button  v-if="this.query.reservationStatus==='2'" type="danger" icon="el-icon-delete" @click="handleDeliverys" plain>批量转配送</el-button>
                <el-button-group>
                    <el-button type="primary" icon="el-icon-warning" @click="aaa">待确认</el-button>
                    <el-button type="primary" icon="el-icon-circle-check" @click="bbb">已确认<i
                            class="el-icon-arrow-right el-icon--right"></i></el-button>
<!--                    <el-button type="primary" icon="el-icon-view" @click="ccc">全部</el-button>-->
                </el-button-group>
                      </div>
                    <!-- 头部右侧按钮模块 -->
                    <div class="avue-crud__right">
                        <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
                        <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
                        <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
                    </div>
                </div>
            </el-row>
            <el-row>
                <!-- 列表模块 -->
                <tablecmt
          :columnList="columnList"
          :tableData="data"
          :loading="loading"
          @inputTxt="inputsc"
          @timeCheck="timesc"
          @btnCheck="btnsc"
          @selectCheck="selectsc"
          @selection="selectionChange"
        >
          <template #default="slotProps">
            <el-text size="small" @click="editsolt(slotProps.scope)">Edit</el-text>
            <el-text size="small" type="danger" @click="delectsolt(slotProps.scope)"
              >Delete</el-text
            >
          </template>
        </tablecmt>
            </el-row>
            <el-row>
              <div class="avue-crud__pagination flex-c-sb" style="width:100%;">
                <div style="font-size: 14px;">
                  勾选数量: {{ selectionList.length }}
                </div>
                <!-- 分页模块 -->
                <el-pagination align="right"
                              background
                              @size-change="sizeChange"
                              @current-change="currentChange"
                              :current-page="page.currentPage"
                              :page-sizes="[30, 50,80, 120]"
                              :page-size="page.pageSize"
                              layout="total, sizes, prev, pager, next, jumper"
                              :total="page.total">
                </el-pagination>
              </div>
            </el-row>
            <!-- 表单模块 -->
            <el-dialog :title="title"
                       v-model="box"
                       width="50%"
                       :before-close="beforeClose"
                       append-to-body>
                <el-form :disabled="view" ref="form" :model="form" label-width="80px">
                    <!-- 表单字段 -->
                    <el-form-item label="订单自编号" v-if="isUpdate" prop="orderId">
                        <el-input v-model="form.orderId" placeholder="请输入订单自编号;订单自编号，关联订单表"/>
                    </el-form-item>
                    <el-form-item label="收货人" prop="consignee">
                        <el-input v-model="form.consignee" placeholder="请输入收货人"/>
                    </el-form-item>
                    <el-form-item label="收件人电话" prop="deliveryPhone">
                        <el-input v-model="form.deliveryPhone" placeholder="请输入收件人电话"/>
                    </el-form-item>
                    <el-form-item label="收件地址" prop="deliveryAddress">
                        <el-input v-model="form.deliveryAddress" placeholder="请输入收件地址"/>
                    </el-form-item>
                    <el-form-item label="预约时间:" prop="reservationDate">
                        <el-date-picker
                                v-model="form.reservationDate"
                                type="date"
                                clearable
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="预约时间:" prop="periodOfTime">
                      <el-radio v-model="form.periodOfTime" :label="'1'" :value="'1'">上午</el-radio>
                      <el-radio v-model="form.periodOfTime" :label="'2'" :value="'2'">下午</el-radio>
                      <el-radio v-model="form.periodOfTime" :label="'3'" :value="'3'">全天</el-radio>
                    </el-form-item>
                    <el-form-item label="配送类型:" prop="serveType">
                        <el-radio v-model="form.deliveryType" :label="'1'" :value="'1'">市配</el-radio>
                        <el-radio v-model="form.deliveryType" :label="'2'" :value="'2'">商配</el-radio>
                    </el-form-item>
                    <el-form-item label="配送方式" prop="deliveryType">
                        <el-radio-group v-model="form.deliveryWay">
                            <el-radio v-model="form.deliveryWay" :label="'1'" :value="'1'">送货</el-radio>
                            <el-radio v-model="form.deliveryWay" :label="'2'" :value="'2'">送货上楼</el-radio>
                            <el-radio v-model="form.deliveryWay" :label="'3'" :value="'3'">送装一体</el-radio>
                            <el-radio v-model="form.deliveryWay" :label="'4'" :value="'4'">装</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="到付运费" v-if="isUpdate" :disAbled="true" prop="collectFee">
                        <el-input v-model="form.collectFee" placeholder="请输入到付运费"/>
                    </el-form-item>
                    <el-form-item label="服务类型" prop="serveType">
                        <el-checkbox-group v-model="form.serveType">
                            <el-checkbox v-for="item in this.addvalueServeTypeData" :label="item.dictKey"
                                         :value="item.dictKey">{{item.dictValue}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="代付运费" v-if="isUpdate" prop="replaceFee">
                        <el-input v-model="form.replaceFee" placeholder="请输入代付运费"/>
                    </el-form-item>
                    <el-form-item label="其他费用" prop="otherFee">
                        <el-input v-model="form.otherFee" placeholder="请输入其他费用"/>
                    </el-form-item>
                    <el-form-item label="预约信息状态" v-if="isUpdate" prop="resvervationStatus">
                        <el-input v-model="form.resvervationStatus" placeholder="请输入预约信息状态;预约列表信息状态；1-待确认、2-已确认"/>
                    </el-form-item>
                    <el-form-item label="订单来源" v-if="isUpdate" prop="orderSource">
                        <el-input v-model="form.orderSource" placeholder="请输入订单来源"/>
                    </el-form-item>
                    <el-form-item label="备货状态" v-if="isUpdate" prop="stockupStatus">
                        <el-input v-model="form.stockupStatus" placeholder="请输入备货状态;备货状态；1-未备货、2-待备货、3-已备货"/>
                    </el-form-item>
                    <el-form-item label="备货区编号" v-if="isUpdate" prop="goodsShelfId">
                        <el-input v-model="form.goodsShelfId" placeholder="请输入备货区编号"/>
                    </el-form-item>
                    <!--          <el-form-item label="预留1" prop="reserve1">-->
                    <!--            <el-input v-model="form.reserve1" placeholder="请输入预留1"/>-->
                    <!--          </el-form-item>-->
                    <!--          <el-form-item label="预留2" prop="reserve2">-->
                    <!--            <el-input v-model="form.reserve2" placeholder="请输入预留2"/>-->
                    <!--          </el-form-item>-->
                    <!--          <el-form-item label="预留3" prop="reserve3">-->
                    <!--            <el-input v-model="form.reserve3" placeholder="请输入预留3"/>-->
                    <!--          </el-form-item>-->
                    <!--          <el-form-item label="预留4" prop="reserve4">-->
                    <!--            <el-input v-model="form.reserve4" placeholder="请输入预留4"/>-->
                    <!--          </el-form-item>-->
                    <!--          <el-form-item label="预留5" prop="reserve5">-->
                    <!--            <el-input v-model="form.reserve5" placeholder="请输入预留5"/>-->
                    <!--          </el-form-item>-->
                </el-form>
                <!-- 表单按钮 -->
                <template #footer>
          <span v-if="!view" class="dialog-footer">
            <el-button type="primary" icon="el-icon-circle-check" @click="handleSubmit">提 交</el-button>
            <el-button icon="el-icon-circle-close" @click="box = false">取 消</el-button>
          </span>
                </template>
            </el-dialog>
        </div>
    </basic-container>
    <edittablehead
    @setcolum="setnewcolum"
    @closce="showdrawer"
    :drawerShow="drawerShow"
    :columnList="columnList"
  ></edittablehead>
</template>

<script>
  import {
    getList,
    getDetail,
    add,
    update,
    remove,
    confirms,
    addReservations
  } from '@/api/distribution/distributionReservation';
  import option from '@/option/distribution/distributionReservation';
  import { mapGetters } from 'vuex';
  import { getDictionaryBiz } from '@/api/system/dict';

  export default {
    data() {
      return {
        columnList: [
        {
          prop: '',
          label: '序号',
          type: 0,
          values: '',
          width: 55,
          checkarr: [],
          fixed: true,
        },
        {
          prop: 'orderId',
          label: '订单自编号',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: true,
          sortable: true,
          head: false,
        },
        {
          prop: 'consignee',
          label: '收货人',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'deliveryAddress',
          label: '收货地址',
          type: 2,
          values: '',
          width: '180',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'consigneePhone',
          label: '收货人手机号',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'serveType',
          label: '服务类型',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'distributingWarehouse',
          label: '配送仓库',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'trainNumber',
          label: '配送车次',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
          head: true,
        },
        {
          prop: 'orderTotal',
          label: '订单总数',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'total',
          label: '总件数',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'loadedNumber',
          label: '装车件数',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'receivedQuantity',
          label: '签收数',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'deliveryDriver',
          label: '送货司机',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'deliveryDriverPhone',
          label: '送货司机手机号',
          type: 2,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'signingTime',
          label: '文员签收时间',
          type: 4,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'sjsigningTime',
          label: '司机签收时间',
          type: 4,
          values: '',
          width: '150',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'signee',
          label: '签收人',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'signingStatus',
          label: '签收状态',
          type: 3,
          values: '',
          width: '130',
          checkarr: [
            {
              value: '已签收',
              label: '已签收',
            },
            {
              value: '未签收',
              label: '未签收',
            },
          ],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'signingType',
          label: '签收类型',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'serviceNumber',
          label: '服务号',
          type: 2,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: true,
        },
        {
          prop: 'notes',
          label: '备注',
          type: 1,
          values: '',
          width: '130',
          checkarr: [],
          fixed: false,
          sortable: false,
        },
        {
          prop: '',
          label: '操作',
          type: 6,
          values: '',
          width: '200',
          checkarr: [],
          fixed: 'right',
          hide: true,
        },
        // 更多列的配置...
      ],
      columnListedit: [],
      drawerShow: false,
        height: 0,
        // 弹框标题
        title: '',
        // 是否展示弹框
        box: false,
        // 是否显示查询
        search: true,
        // 加载中
        loading: true,
        // 是否为查看模式
        view: false,
        // 查询信息
        query: {},
        // 分页信息
        page: {
          currentPage: 1,
          pageSize: 30,
          total: 40
        },
        // 表单数据
        form: {},
        // 选择行
        selectionList: [],
        // 表单配置
        option: option,
        // 表单列表
        data: [],
        //配送方式字典列表
        deliveryTypeData: [],
        //配送类型字典列表
        resvervationStatusData: [],
        stockupStatusData: [],
        orderSourceData: [],
        periodOfTimeData: [],
        deliveryWayData: [],
        //控制编辑弹窗是否可编辑
        isUpdate: false,
        addvalueServeTypeData:[],
      };
    },
    mounted() {
      this.init();
      this.onLoad(this.page);
      this.getDictionary();
      /** 
     * 初始化获取本地缓存的编辑隐藏的列表
     *  固定搭配，不能更改
     */
    let newarr = this.$functions.getStorage(window.location.pathname);
    if (newarr) {
      this.columnList.map(item => {
        item.head = false;
      });
      newarr.map(ite => {
        this.columnList.map(item => {
          if (ite == item.label) {
            item.head = true;
          }
        });
      });
    }
    },
    computed: {
      ...mapGetters(['permission']),
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(',');
      }
    },
    methods: {
      showdrawer(value){
      this.drawerShow=value
    },
    /** 
     * 弹窗的勾选回调，用于更改头部数组
     * 固定搭配，只需要更换   columnList  
     */
    setnewcolum(newarr, headarr) {
      // console.log(newarr,'+++++++++++')
      this.columnList = newarr;
      this.$functions.setStorage(window.location.pathname, headarr);
    },
    selectionsc(value) {
      console.log(value);
    },
    delectsolt(scope) {
      const { row } = scope;
      console.log(row);
    },
    editsolt(scope) {
      const { row } = scope;
      console.log(row);
    },
    btnsc(index, row) {
      console.log(index, row);
    },
    selectsc(index, row) {
      console.log(index, row);
    },
    timesc(index, row) {
      console.log(index, row);
    },
    inputsc(index, row) {
      console.log(index, row);
    },
      init() {
        this.height = this.setPx(document.body.clientHeight - 340);
      },
      ddd() {
        this.form.deliveryType === '';
        console.log(' this.form.deliveryType===', this.form.deliveryType);
      },
      //数据字典数据获取
      getDictionary() {
        //服务内容
        getDictionaryBiz('addvalue_serve_type').then(res => {
          this.addvalueServeTypeData = res.data.data;
        });
        getDictionaryBiz('delivery_type').then(res => {
          this.deliveryTypeData = res.data.data;
        });
        //订单来源
        getDictionaryBiz('order_source').then(res => {
          this.orderSourceData = res.data.data;
          console.log(this.deliveryTypeData);
        });
        //预约状态
        getDictionaryBiz('resvervation_status').then(res => {
          this.resvervationStatusData = res.data.data;
          console.log(this.deliveryTypeData);
        });
        //备货状态
        getDictionaryBiz('stockup_status').then(res => {
          this.stockupStatusData = res.data.data;
          console.log(this.deliveryTypeData);
        });
        //时段
        getDictionaryBiz('period_of_time').then(res => {
          this.periodOfTimeData = res.data.data;
          console.log(this.deliveryTypeData);
        });
        getDictionaryBiz('delivery_way').then(res => {
          this.deliveryWayData = res.data.data;
        });

      },
      searchHide() {
        this.search = !this.search;
      },
      searchChange() {
        this.onLoad(this.page);
      },
      searchReset() {
        this.query = {};
        this.page.currentPage = 1;
        this.onLoad(this.page);
      },
      handleConfirmReservations() {
        if (this.selectionList.length === 0) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        let param = {};
        param.ids = this.ids.toString();
        addReservations(param).then(res => {
          this.selectionClear();
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });

      },
      handleSubmit() {

          this.form.serveType = this.form.serveType.join(",");
          update(this.form).then(() => {
            this.box = false;
            this.onLoad(this.page);
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          });
      },
      handleAdd() {
        this.$router.push({
          path: '/distribution/reservation/reservationFrom'
        });
      },

      handleEdit(row) {
        this.title = '编辑';
        this.box = true;
        getDetail(row.id).then(res => {
          if (res.data.data.serveType.length > 1) {
            res.data.data.serveType = res.data.data.serveType.split(',');
          } else {
            res.data.data.serveType = Array.from(res.data.data.serveType);
          }
          this.form = res.data.data;
        });
      },
      aaa() {
        this.query.reservationStatus = '1';
        this.onLoad(this.page);
      },
      bbb() {
        this.query.reservationStatus = '2';
        this.onLoad(this.page);
      },
      handleView(row) {
        this.title = '查看';
        this.view = true;
        this.box = true;
        getDetail(row.id).then(res => {
          this.form = res.data.data;
        });
      },
      /**
       * 批量转配送
       */
      handleDeliverys() {
        if (this.selectionList.length === 0) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        let ids = [];
        this.selectionList.forEach(item => {
          if (item.id) {
            ids.push(item.id);
          }
        });
        ids = ids.join(',');
          this.$router.push({
            path: '/distribution/reservation/atlas',
            query: {
              id: ids
            }
          });
        // console.log(">>>>>>>>>>",ids);

      },
      handleStockUp() {
        if (this.selectionList.length === 0) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        let param = {};
        param.ids = this.ids;
        const date = new Date();
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const formattedDate = `${year}-${month}-${day}`;
        console.log(formattedDate);
        param.stockupDate = formattedDate;
        param.goodsAreaId = '46546456156';
        param.addvalueType = '1';
        confirms(param).then(() => {
          this.selectionClear();
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        this.$confirm('确定将选择数据删除?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.selectionClear();
            this.onLoad(this.page);
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          });
      },
      rowDel(row) {
        this.$confirm('确定将选择数据删除?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          });
      },
      beforeClose(done) {
        done();
        this.form = {};
        this.view = false;
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        // this.$refs.table.clearSelection();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
        this.onLoad(this.page);
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
        this.onLoad(this.page);
      },

      onLoad(page, params = {}) {
        this.loading = true;
        if (!this.query.reservationStatus){
          this.query.reservationStatus = '1';
        }
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          console.log('>>>>>>>', data);
          data.records.forEach(item => {
            this.orderSourceData.forEach(a => {
              if (item.orderSource === a.dictKey) {
                item.orderSource = a.dictValue;
              }
            });
            this.stockupStatusData.forEach(b => {
              if (item.stockupStatus === b.dictKey) {
                item.stockupStatus = b.dictValue;
              }
            });
            this.resvervationStatusData.forEach(e => {
              if (item.reservationStatus === e.dictKey) {
                item.reservationStatus = e.dictValue;
              }
            });
            this.deliveryTypeData.forEach(c => {
              if (item.deliveryType === c.dictKey) {
                item.deliveryType = c.dictValue;
              }
            });

            this.deliveryWayData.forEach(c => {
              if (item.deliveryWay === c.dictKey) {
                item.deliveryWay = c.dictValue;
              }
            });
            this.periodOfTimeData.forEach(d => {
              console.log("11111111111");
              if (item.periodOfTime === d.dictKey) {
                item.periodOfTime = d.dictValue;
              }
            });
            let pa = [];
            if (item.serveType.length>1){
              pa = item.serveType.split(",");
            }else {
              pa.push(item.serveType);
            }
            this.addvalueServeTypeData.forEach(f => {
              pa.forEach((p,index)=>{
                if (p===f.dictKey){
                  pa[index] = f.dictValue
                }
              })
            });
            item.serveType = pa.join(",");
          });
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
</script>

<style scoped lang='scss'>
.fr-fo {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.el-btn {
  margin-right: 0;
}
</style>
