<template>
  <div class="workbench">
    <div class="workbench-main" v-loading="loading">
        <div class="workbench-main__search">
          <div style="width: 100%">
            <el-row>
              <!-- <el-col :span="4" style="width: 351px;"> -->
                <!-- <period-date-picker
                  :start="parmValue.addtime_start"
                  :end="parmValue.addtime_end"
                  :width="'160px'"
                  :size="searchSize"
                  placeholder="创建"
                  @timeReturned="(evt) => handleTime(evt, 'create')"
                /> -->
              <!-- </el-col> -->

               <el-col :span="4" style="padding-right:10px">
                <el-select v-model="parmValue.status" style="width:100%" size="mini" placeholder="订单状态" @change="
                  pageInfo.curr = 1;
                  parmValue.page = 1;
                  searchList();
                ">
                  <el-option v-for="status in statusOptions" 
                    :key="status.value" 
                    :value="status.value" 
                    :label="status.label"
                   />
                </el-select>
              </el-col>

             <el-col :span="4" style="padding-right:10px">
                <search-activity-type style="width:100%" size="mini" :value.sync="parmValue.demandProject" placeholder="活动类型" @change="
                   pageInfo.curr = 1;
                   parmValue.page = 1;
                   searchList();
                  " />
              </el-col>


              <el-col :span="4">
                <search-people-number 
                  size="mini" 
                  style="width:100%" 
                  :value.sync="parmValue.participant" 
                  placeholder="活动人数"  
                  @change="
                  pageInfo.curr = 1;
                  parmValue.page = 1;
                  searchList();
                " />
              </el-col>
                            
              <el-col :span="3" style="width: 66px; float: right">
                <el-button
                  type="primary"
                  :size="searchSize"
                  style="float: right; margin-left: 5px"
                  @click="searchList"
                >
                  刷新
                </el-button>
              </el-col>
              <el-col :span="4" class="fr" style="width: 66px">
                <el-button
                  type="warning"
                  class="fr"
                  :size="searchSize"
                  @click="restSearch"
                >
                  重置
                </el-button>
              </el-col>
            </el-row>

            <el-row style="margin-top:10px">
              <!-- <el-col :span="4" style="width: 341px;">
                <period-date-picker
                  :start="parmValue[act_start]"
                  :end="parmValue[act_end]"
                  :width="'154px'"
                  :size="searchSize"
                  @timeReturned="evt => handleTime(evt,'activity')"
                  placeholder="活动"
                />
              </el-col> -->


              <el-col :span="4" style="padding-right:10px">
                <el-input size="mini" placeholder="需求编号" v-model="parmValue.reqCode" @change="
                pageInfo.curr = 1;
                parmValue.page = 1;
                searchList();
               "/>
              </el-col>

              <el-col :span="4" style="padding-right:10px">
                <el-input v-model="parmValue.req_tel" size="mini" placeholder="联系电话" @change="
                pageInfo.curr = 1;
                parmValue.page = 1;
                searchList();
               "/>
              </el-col>



              <!-- <el-col :span="4">
                <search-demand style="width:100%" size="mini" :value.sync="parmValue.activityDemand"  @change="
                  pageInfo.curr = 1;
                  parmValue.page = 1;
                  searchList();
                " />
              </el-col> -->
            </el-row>
          </div>
        </div>

      <ul class="clear po-ul">
        <li class="po-li">
          <el-row class="taskList">
            <el-col
              :xs="8" :sm="8" :md="8" :lg="6" :xl="6"
              class="task-card"
              v-for="item in list"
              :key="item"
             
            >
              <div  @click="wantTo(item.id)">
              <div class="task-card__header">
                <h3>{{item.reqCode}}</h3>
                <h3 style="margin-left:10px">{{item.shortname}}</h3>
              </div>

              <div class="task-card__header">
                <span>{{getActTime(item)}} , 共{{item.act_day_count}}天</span>
              </div>
              <div class="task-card__content text-color">
                {{item.req_demand_name.map(({name}) => name).join("+") || '--'}}
              </div>

              <div class="task-card__content text-color">
                <span>{{item.require_item_name}} </span> ,
                <span v-if="Number(item.participant_max) === 0">{{item.participant_min}}+人</span>
                <span v-else>{{item.participant_min}} ~ {{item.participant_max}}人</span>
              </div>

              <div class="task-card__content">
                <el-tag class="status" size="mini" style="font-size:12px" :type="statusOptions.find(_item => _item.value === String(item.status)).type">
                  {{ statusOptions.find(_item => _item.value === String(item.status)).label }}
                </el-tag>
              </div>
              </div>
            </el-col>

            <div class="no-data">暂无数据！</div>
          </el-row>

        </li>
      </ul>
    </div>
    <!-- 弹窗 新增/修改 -->
    <add-edit
      :id="modelId"
      :show-model="showModel"
      :sitem="sitem"
      @refresh="searchList"
      @cancel="showModel = false"
    />
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/customerService/workbench";
import roleLevel from "@/assets/js/roleLevel";
import mixinPage from "@/mixins/elPaginationHandle";
import { demandStatusOptions } from '@/assets/js/statusList';
import { mapGetters } from "vuex";
import resToken from "@/mixins/resToken";
import dayjs from "dayjs"

/**
* @props
 创建时间开始&结束
  createStart //创建开始时间
  createEnd //创建结束时间
  activityStart //活动开始时间
  activityEnd //活动结束时间
  consultationStart //咨询开始时间
  consultationEnd //咨询结束时间
  activityPerson'//活动人数,
  activityCity //活动城市,
  currentStatus //当前状态,
  mobile //联系电话
  activityDemand //活动需求
  demandNo //需求编号
  demandProject //需求项目
  demandCreator //需求创建人
  demandEnterprise //需求企业
**/

const mapDateFields = {
  create: {
    start:'createStart',
    end:"createEnd",
    label:'创建'
  },
  activity:{
    start:'activityStart',
    end:"activityEnd",
    label:'活动'
  },
  consultation:{
    start:"consultationStart",
    end:"consultationEnd",
    label:'咨询'
  }
}

export default {
  name: "workbench",
  mixins: [mixinPage, resToken],
  computed: {
    //组件SIZE设置
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      const { btnList } = this.$store.getters;
      const tran = btnList.find((i) => i.menu_route == "workbench") || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  data() {
    return {
      num: 60,
      timer: null,
      demandStatusOptions,
      statusOptions:[
        { value : '1', label:' 待供应商反馈评估预算函',type:'warning' },
        { value : '2', label:' 待供应商上传活动方案',type:'info' },
        { value : '3', label:' 待供应商上传计划函',type:'' },
      ],
      roleLevel: roleLevel,
      loading: false,
      showModel: false,
      modelId: "000",
      sitem: {},
      list1: [],
      list: [],
      countdownMaps:{},
      parmValue: {
        participant:"",
        addtime_start:"", //创建开始时间
        addtime_end:"", //创建结束时间
        act_start:"", //活动开始时间
        act_end:"", //活动结束时间
        req_start:"", //咨询开始时间
        req_end:"", //咨询结束时间
        activityPerson:"",//活动人数
        city:"", //活动城市,
        status:"", //当前状态,
        req_tel:"", //联系电话
        activityDemand:"", //活动需求
        reqCode:"", //需求编号
        demandProject:"", //需求项目
        demandCreator:"", //需求创建人
        demandEnterprise:"", //需求企业
        page: 1, // 页码
        size: 1000, // 每页显示条数
      },
      // 表格 - 数据
      tableData: [],
      // 表格 - 参数
      table: {
        stripe: true,
        border: true,
        _defaultHeader_: ["setcol"],
      },
      // 表格 - 分页
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0,
      },
      // 表格 - 列参数
      columns: [
        {
          prop: "id",
          label: "ID",
        },
        {
          prop: "workbench",
          label: "活动名称",
        },
        {
          prop: "status",
          label: "状态",
          _slot_: "status",
        },
        {
          prop: "creater",
          label: "创建人",
        },
        {
          prop: "addtime",
          label: "创建时间",
        },
        {
          prop: "",
          label: "操作",
          fixed: "right",
          _noset_: true,
          _slot_: "operation",
        },
      ],
    };
  },
  mounted() {
    this.searchList(true);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    getActTime(item){
      const { act_time, act_day_count } = item;
      const end_time = dayjs(act_time).subtract(act_day_count,' days').format('MM.DD')
      return `${dayjs(act_time).format('MM.DD')} ~ ${end_time}`
    },
    wantTo(id) {
      this.routeGoto("workbenchDetail", { id });
    }, 
    restSearch() {
      this.customerCode = [];
      this.select = "1";
      this.s_input = "";
      this.parmValue = {
        participant:"",
        addtime_start:"", //创建开始时间
        addtime_end:"", //创建结束时间
        act_start:"", //活动开始时间
        act_end:"", //活动结束时间
        req_start:"", //咨询开始时间
        req_end:"", //咨询结束时间
        activityPerson:"",//活动人数
        city:"", //活动城市,
        status:"", //当前状态,
        req_tel:"", //联系电话
        activityDemand:"", //活动需求
        reqCode:"", //需求编号
        demandProject:"", //需求项目
        demandCreator:"", //需求创建人
        demandEnterprise:"", //需求企业
        page: 1, // 页码
        size: 1000, // 每页显示条数
      };
      // 表格 - 分页
      this.pageInfo = {
        size: 1000,
        curr: 1,
        total: 0,
      };
      this.searchList();
    },
    async well_timer() {
      this.timer = setInterval(async () => {
        if (this.num !== 0) {
          this.num--;
        } else {
          if (this.timer) {
            await this.searchList();
            this.num = 60;
          } else {
            this.clearTime();
          }
        }
      }, 1000);
    },
    restSearch() {
      // 表格 - 分页
      this.pageInfo = {
        size: 1000,
        curr: 1,
        total: 0,
      };
      this.parmValue = {
        page: 1, // 页码
        size: 1000, // 每页显示条数
        status: "1",
      };
      this.searchList();
    },

    // 新建/编辑/详情
    openModal(row, type) {
      this.sitem = row;
      this.modelId = type;
      this.showModel = true;
    },

    // 时间
    async handleTime(evt) {
      this.parmValue.starttime = evt.startTime || "";
      this.parmValue.endtime = evt.endTime || "";
      if (
        (this.parmValue.starttime !== "" && this.parmValue.endtime !== "") ||
        (this.parmValue.starttime === "" && this.parmValue.endtime === "")
      ) {
        this.pageInfo.curr = 1;
        this.parmValue.page = 1;
        await this.searchList();
      }
    },
    /**
     * 启用/禁用
     * @param {String} id id
     * @param {String} status 0-禁用 1-启用
     */
    async changeStatus(id, status) {
      await this.$confirm(`确定要改为${status + "" === "1" ? "禁用" : "启用"}？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.loading = true;
          const model = {
            id: id,
            status: status + "" === "1" ? "0" : "1",
          };
          const res = await asyncRequest.status(model);
          if (res && res.code === 0) {
            this.loading = false;
            this.$notify.success({
              title: "状态修改成功！",
              message: "",
            });
            await this.searchList();
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.loading = false;
            this.$message.warning(res.message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },

    imgclick(e) {
      e.stopPropagation();
      e.preventDefault();
    },
        // 时间选择事件
    async handleTime(e,field) {
      const { start:startProp,end:endProp } = mapDateFields[field]
      if (e.startTime !== "") {
        this.parmValue[startProp] = e.startTime;
      } else {
        this.parmValue[startProp] = "";
      }
      if (e.endTime !== "") {
        this.parmValue[endProp] = e.endTime;
      } else {
        this.parmValue[endProp] = "";
      }
      if (this.parmValue[startProp] !== "" && this.parmValue[endProp] !== "") {
        this.pageInfo.curr = 1;
        this.parmValue.page = 1;
        await this.searchList();
      }
    },
    getTime(value) {
      var secondTime = parseInt(value);// 秒
      var minuteTime = 0;// 分
      var hourTime = 0;// 小时
      if(secondTime > 60) {//如果秒数大于60，将秒数转换成整数
        //获取分钟，除以60取整数，得到整数分钟
        minuteTime = parseInt(secondTime / 60);
        //获取秒数，秒数取余，得到整数秒数
        secondTime = parseInt(secondTime % 60);
        //如果分钟大于60，将分钟转换成小时
        if(minuteTime > 60) {
          //获取小时，获取分钟除以60，得到整数小时
          hourTime = parseInt(minuteTime / 60);
          //获取小时后取余的分，获取分钟除以60取余的分
          minuteTime = parseInt(minuteTime % 60);
        }
      }

      const s = String(secondTime)
      var result = s.length === 1 ? '0' + s : s


      if(minuteTime > 0) {
        const m = String(minuteTime)
        result = "" + (m.length === 1 ? '0' + m : m) + ":" + result;
      }
      
      if(hourTime > 0) {
        const h =  String(hourTime)
        result = "" + (h.length === 1 ? '0' + h : h) + ":" + result;
      }
      return result;
    },
    // 刷新表格
    async searchList() {
      if (!this.loading) {
      for(const field of Object.keys(mapDateFields)){
        const { start: startProp, end: endProp, label } = mapDateFields[field]

        if (
          (this.parmValue[startProp] !== "" && this.parmValue[endProp] === "") ||
          (this.parmValue[startProp] === "" && this.parmValue[endProp] !== "")
          ) {
            this.$message.warning(`${label}时间区间不完整！`);
            return;
          }
      }

        this.loading = true;
        const { code, data } = await asyncRequest.list({
          ...this.parmValue,
          flow_stage:"磋商阶段",
          size: 1000
        });

        if (code === 1) {
          let { list, count } = data;
          list = Object.values(list)
          this.countdownMaps = list.reduce((prev,current) => {
            return {
              ...prev,
              [current.id] : '00:00:00'
            }
          },{})

          this.list = list
          this.pageInfo.total = count
        }  else {
          this.list = [];
          this.pageInfo.total = 0;
        }
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.workbench {
  position: relative;
  width: 100%;
  height: calc(100vh - 140px);
  box-sizing: border-box;
  background: #f0f2f5;
  padding: 16px;
  .workbench-main {
    height: 100%;
    &__search{
      background: #ffffff;
      padding: 10px;
    }

    position: relative;
    width: 100%;
    // height: 100%;
    box-sizing: border-box;
    ul.po-ul {
      width: 100%;
      height: 100%;
      overflow-y: hidden;
      box-sizing: border-box;
      li.po-li {
        position: relative;
        height: 100%;
        width: 100%;
        border-radius: 5px;
        overflow: hidden;
        box-sizing: border-box;
        // border: 1px solid rgba(121, 121, 121, 1);
        .task-card {
          cursor: pointer;
          border: 1px dashed #e6ebf5;
          margin-left:-1px;
          margin-top:-1px;
          line-height: 20px;
          overflow: hidden;
          // width: 100%;
          padding: 10px 12px;
          text-align: center;
          font-size: 12px;
          // width:25%;
          height:120px;

          &__header{
            display: flex;
            width: 100%;
            justify-content: flex-start;

            h3{
              font-weight: 500;
              color: #454545;
            }

            span{
              color:#909499
            }
          }

          &__content{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
            // margin: 5px 0px;
          }

          &__footer{
            color: #00000072;
            text-align: left;
            ul{
              display: flex;

              .line{
                margin: 0px 5px;
              }
            }
          }
        }
        &:first-child {
          float: left;
          width: 100%;
          // margin: 0 2% 0 0;
          .task-item {
            width: 20%;
            &:nth-child(3n + 1) {
              border-right: 1px dashed #e6ebf5;
            }
            &:nth-child(3n + 2) {
              border-right: 1px dashed #e6ebf5;
            }
          }
          .tast-item-active {
            width: 20%;
            background: skyblue;
            &:nth-child(3n + 1) {
              border-right: 1px dashed #e6ebf5;
            }
            &:nth-child(3n + 2) {
              border-right: 1px dashed #e6ebf5;
            }
          }
        }
        // &:last-child {
        //   margin: 0;
        //   float: right;
        //   width: 32%;
        // }
        .taskTitle {
          width: 100%;
          height: 55px;
          line-height: 55px;
          text-align: center;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          // border-bottom: 1px solid rgba(121, 121, 121, 1);
          &.color1 {
            background: rgba(250, 205, 145, 1);
          }
          &.color2 {
            background: rgba(202, 249, 130, 1);
          }
          // &.color3 {
          //   background: rgba(129, 211, 248, 1);
          // }
          // &.color4 {
          //   background: rgba(255, 255, 128, 1);
          // }
        }
        .taskList {
          // position: relative;
          // display: flex;
          // padding: 0 0 0 5px;
          padding: 5px 0 0 12px;
          background: #fff;

          // height: calc(100% - 56px);
          // width: 100%;
          overflow-y: scroll;
          @include scrollBar();
          .no-data {
            width: 100%;
            height: 60px;
            line-height: 60px;
            font-size: 14px;
            float: left;
            text-align: center;
            color: rgba(0, 0, 0, 0.65);
          }
        }
      }
    }
  }
}

.text-color{
  color:#909499;
}

.taskList{
  height: 100%;
  // display: flex;
  // flex-wrap: wrap;
  
  // justify-content: space-between;
}
</style>
