<template>
  <el-dialog :visible="visible" title="选择需求订单" center width="1024px" top="60px" @close="handleClose" :close-on-click-modal="false">
    <div class="demand-order">
      <ex-table
        :table="table"
        v-loading="loading"
        :data="tableData"
        :columns="columns"
        :page="pageInfo"
        size="mini"
        @page-curr-change="handlePageChange"
        @page-size-change="handleSizeChange"
        @selection-change="list => selected = list"
        @screen-reset="
          pageInfo.curr = 1;
          parmValue.page = 1;
          searchList();
        "
        @screen-submit="
          pageInfo.curr = 1;
          parmValue.page = 1;
          searchList();
        "
      >
        <template #table-header>
          <el-row style="width:100%">
            <el-col :span="5">
              <el-input v-model="parmValue.reqCode" size="mini" placeholder="需求订单编号" />
            </el-col>

            <el-col :span="3" style="width:125px" class="fr">
              <el-button size="mini" type="warning" @click="reset">重置</el-button>
              <el-button size="mini" type="primary" @click="searchList">搜索</el-button>
            </el-col>
          </el-row>
        </template>
        
        <template #req_demand="{scope}">{{
          scope.row.req_demand_name.map(({name}) => name).join("+") || '--'
          }}</template>

          <template #actTime="{ scope }">
            {{getActTime(scope.row)}} , 共{{scope.row.act_day_count}}天
          </template>

          <template #participant="{ scope }">
            <span v-if="Number(scope.row.participant_max) === 0">{{
              scope.row.participant_min
            }}+</span>

            <span v-else>
              {{scope.row.participant_min}} ~ {{scope.row.participant_max}}
            </span> 人
          </template>

        <template #status="{ scope }">
          <el-tag
            size="mini"
            v-text="(demandStatusOptions.find((item) => item.value == String(scope.row.status)) || {}).label || '--'
            "
          />
        </template>
      </ex-table>

      <div class="flex-end">
        <el-button type="primary" size="mini" @click="onConfirmDemand">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import pageInfo from "@/mixins/elPaginationHandle"
import asyncRequest from "@/apis/service/customerService/demandOrder";
import { demandStatusOptions } from '@/assets/js/statusList'
import { columns } from "./_columns"
import dayjs from 'dayjs';
export default {
  props:['visible'],
  mixins:[ pageInfo ],
  computed:{
    _visible:{
      get(){
        return this.visible
      },
      set(value){
        this.$emit('update:visible', value)
      }
    }
  },
  watch:{
    visible(value){
      if(!value) return
      this.searchList()
    }
  },
  data(){
    return {
      demandStatusOptions,
      columns,
      size: 'mini',
      parmValue: {
        reqCode: "",
        page:1
      },
      loading: false,
      tableData: [],
      selected: [],
      table: {},
      pageInfo: {
        size:10,
        curr:1,
        total:0
      },
      table: {
        stripe: true,
        border: true,
      }
    }
  },
  methods:{
    handleClose(){
      this.pageInfo = {
        curr: 1,
        size: 10,
        total: 0
      }

      this.parmValue = {
        reqCode: "",
        page: 1
      }

      this._visible = false
    },
    reset(){
      this.parmValue = {
        reqCode:""
      }

      this.searchList()
    },
    async searchList() {
      this.loading = true;
      
      const res = await asyncRequest.list({
        ...this.parmValue,
        ...this.pageInfo,
        is_winv: "1",
        status: "12"
      });


      if (res && res.code === 1 && res.data) {
        this.tableData = res.data.list;
        this.pageInfo.total = Number(res.data.count);
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }

      this.loading = false;
    },
    getActTime(item){
      const { act_time, act_day_count } = item;
      const end_time = dayjs(act_time).subtract(Number(act_day_count) - Number(act_day_count) * 2,'day').format('MM.DD')
      return `${dayjs(act_time).format('MM.DD')} ~ ${end_time}`
    },
    onConfirmDemand(){
      if(this.selected.length === 0){
        this.$message.warning('请选择一个需求订单!')
        return
      }

      if(this.selected.length > 1){
        this.$message.warning('只能选择一个需求订单!')
        return
      }

      this.$emit('change',this.selected[0])
      this._visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.demand-order{
  /deep/ .el-pagination{
    float: left !important;
  }
}
</style>
