<template>
  <div class="workbench">
    <div class="workbench-main" v-loading="loading" v-if="powers.some((i) => i == '001')">
        <div class="workbench-main__search">
          <div style="width: 100%">
            <el-row style="padding: 0 0 0 80px">
              <el-col :span="4" style="width: 351px;">
                <period-date-picker
                  :start="parmValue.createStart"
                  :end="parmValue.createEnd"
                  :width="'160px'"
                  :size="searchSize"
                  placeholder="创建"
                  @timeReturned="(evt) => handleTime(evt,'create')"
                />
              </el-col>

              <el-col :span="4" style="width:200px">
                <el-select v-model="parmValue.activityPerson" size="mini" placeholder="活动人数" @change="
                pageInfo.curr = 1;
                parmValue.page = 1;
                searchList();
               ">
                  <el-option />
                </el-select>
              </el-col>

              <el-col :span="4" style="width:200px">
                <el-select v-model="parmValue.city" size="mini" placeholder="活动城市" @change="
                pageInfo.curr = 1;
                parmValue.page = 1;
                searchList();
               ">
                  <el-option />
                </el-select>
              </el-col>
                            

              <el-col :span="3" style="width: 66px; float: right">
                <el-button
                  :size="searchSize"
                  type="primary"
                  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[activityStart]"
                  :end="parmValue[activityEnd]"
                  :width="'154px'"
                  :size="searchSize"
                  @timeReturned="evt => handleTime(evt,'activity')"
                  placeholder="活动"
                />
              </el-col>

              <el-col :span="4" style="margin-right:10px">
                <el-select v-model="parmValue.currentStatus" style="width:100%" size="mini" placeholder="当前状态" @change="
                pageInfo.curr = 1;
                parmValue.page = 1;
                searchList();
               ">
                  <el-option />
                </el-select>
              </el-col>

              <el-col :span="4">
                <el-select  v-model="parmValue.activityDemand" style="width:100%" size="mini" placeholder="活动需求" @change="
                pageInfo.curr = 1;
                parmValue.page = 1;
                searchList();
               ">
                  <el-option />
                </el-select>
              </el-col>
            </el-row>

            <el-row style="margin-top:10px">
              <el-col :span="4" style="width: 341px;">
                <period-date-picker
                  :start="parmValue.consultationStart"
                  :end="parmValue.consultationEnd"
                  :width="'154px'"
                  :size="searchSize"
                  @timeReturned="evt => handleTime(evt,'consultation')"
                  placeholder="咨询截止"
                />
              </el-col>

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

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


            <el-row style="margin-top:10px">
              <el-col :span="4">
                <el-select size="mini" style="width:100%" placeholder="需求项目" v-model="parmValue.demandProject" @change="
                pageInfo.curr = 1;
                parmValue.page = 1;
                searchList();
               ">
                  <el-option />
                </el-select>
              </el-col>

              <el-col :span="4" style="margin-left:10px">
                <el-input size="mini" placeholder="需求创建人" v-model="parmValue.demandCreator" @change="
                pageInfo.curr = 1;
                parmValue.page = 1;
                searchList();
               "/>
              </el-col>

              <el-col :span="4" style="margin-left:10px">
                <el-select size="mini" placeholder="需求企业" v-model="parmValue.demandEnterprise" @change="
                pageInfo.curr = 1;
                parmValue.page = 1;
                searchList();
               ">
                  <el-option />
                </el-select>
              </el-col>
            </el-row>

          </div>

          <el-row style="margin-top:10px">
            <el-col :span="4" style="width: 341px;">
              <period-date-picker
                :start="parmValue[activityStart]"
                :end="parmValue[activityEnd]"
                :width="'154px'"
                :size="searchSize"
                @timeReturned="evt => handleTime(evt,'activity')"
                placeholder="活动"
              />
            </el-col>
            <el-col :span="4" style="margin-right:10px">
              <el-select v-model="parmValue.currentStatus" style="width:100%" size="mini" placeholder="当前状态" @change="
              pageInfo.curr = 1;
              parmValue.page = 1;
              searchList();
             ">
                <el-option />
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select  v-model="parmValue.activityDemand" style="width:100%" size="mini" placeholder="活动需求" @change="
              pageInfo.curr = 1;
              parmValue.page = 1;
              searchList();
             ">
                <el-option />
              </el-select>
            </el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-col :span="4" style="width: 341px;">
              <period-date-picker
                :start="parmValue.consultationStart"
                :end="parmValue.consultationEnd"
                :width="'154px'"
                :size="searchSize"
                @timeReturned="evt => handleTime(evt,'consultation')"
                placeholder="咨询截止"
              />
            </el-col>
            <el-col :span="4" style="margin-right:10px">
              <el-input v-model="parmValue.mobile" size="mini" placeholder="联系电话" @change="
              pageInfo.curr = 1;
              parmValue.page = 1;
              searchList();
             "/>
            </el-col>
            <el-col :span="4" style="margin-right:10px">
              <el-input size="mini" placeholder="需求编号" v-model="parmValue.demandNo" @change="
              pageInfo.curr = 1;
              parmValue.page = 1;
              searchList();
             "/>
            </el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-col :span="4">
              <el-select size="mini" style="width:100%" placeholder="需求项目" v-model="parmValue.demandProject" @change="
              pageInfo.curr = 1;
              parmValue.page = 1;
              searchList();
             ">
                <el-option />
              </el-select>
            </el-col>
            <el-col :span="4" style="margin-left:10px">
              <el-input size="mini" placeholder="需求创建人" v-model="parmValue.demandCreator" @change="
              pageInfo.curr = 1;
              parmValue.page = 1;
              searchList();
             "/>
            </el-col>
            <el-col :span="4" style="margin-left:10px">
              <el-select size="mini" placeholder="需求企业" v-model="parmValue.demandEnterprise" @change="
              pageInfo.curr = 1;
              parmValue.page = 1;
              searchList();
             ">
                <el-option />
              </el-select>
            </el-col>
          </el-row>
        </div>

      <ul class="clear po-ul">
        <li class="po-li">
          <div class="taskList">
            <div
              class="task-card"
              v-for="item in list"
              :key="item"
              @click="wantTo(item.infoNo)"
            >
              <div class="task-card__header">
                <h3>泰康人寿总公司北京分公司</h3>
                <p>北京</p>
              </div>

              <div class="task-card__content">
                大型活动(1000以上),场地+用餐+住宿，表彰会
              </div>

              <div class="task-card__footer">
                <ul>
                  <li>
                    <i class="el-icon-timer" />
                    04:34:59
                  </li>
                  <li class="line">|</li>
                  <li>
                    <i class="el-icon-user" />
                    2
                  </li> 
                </ul>
              </div>
            </div>
            <div class="no-data">暂无数据！</div>
          </div>
        </li>
      </ul>
    </div>
    <no-auth v-else></no-auth>
    <!-- 弹窗 新增/修改 -->
    <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 { mapGetters } from "vuex";
import resToken from "@/mixins/resToken";
import { createEmptyStringObject } from '../../../utils/static';

/**
* @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,
      roleLevel: roleLevel,
      loading: false,
      showModel: false,
      modelId: "000",
      sitem: {},
      list1: [],
      list: [],
      parmValue: {
        createStart:"", //创建开始时间
        createEnd:"", //创建结束时间
        activityStart:"", //活动开始时间
        activityEnd:"", //活动结束时间
        consultationStart:"", //咨询开始时间
        consultationEnd:"", //咨询结束时间
        activityPerson:"",//活动人数
        activityCity:"", //活动城市,
        currentStatus:"", //当前状态,
        mobile:"", //联系电话
        activityDemand:"", //活动需求
        demandNo:"", //需求编号
        demandProject:"", //需求项目
        demandCreator:"", //需求创建人
        demandEnterprise:"", //需求企业
        page: 1, // 页码
        size: 1000, // 每页显示条数
      },
      // 状态
      statusOptions: [
        { id: "0", label: "禁用" },
        { id: "1", label: "启用" },
      ],
      // 表格 - 数据
      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: {
    wantTo(infoNo) {
      if (this.powers.some((i) => i == "007")) {
        this.routeGoto("workbenchDetail", { id: infoNo });
      }
    }, 
    restSearch() {
      this.customerCode = [];
      this.select = "1";
      this.s_input = "";
      this.parmValue = {
        createStart:"", //创建开始时间
        createEnd:"", //创建结束时间
        activityStart:"", //活动开始时间
        activityEnd:"", //活动结束时间
        consultationStart:"", //咨询开始时间
        consultationEnd:"", //咨询结束时间
        activityPerson:"",//活动人数
        activityCity:"", //活动城市,
        currentStatus:"", //当前状态,
        mobile:"", //联系电话
        activityDemand:"", //活动需求
        demandNo:"", //需求编号
        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: 15, // 每页显示条数
        status: "1",
      };
      this.searchList();
    },

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

    // 时间
    async handleTime(e) {
      this.parmValue.starttime = e.startTime || "";
      this.parmValue.endtime = e.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 startProp = mapFields[`${prefix}Start`]
      // const endProp = mapFields[`${prefix}End`]

      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();
      }
    },
    // 刷新表格
    async searchList(type) {
      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,
          needRela: true,
        });

        if (code === 0) {
          const { list, count } = data;
          this.list = list;
          this.list.map((e) => {
            e.cat_name = "";
            if (e.can && e.can.length > 0) {
              e.can.forEach((a, ai) => {
                e.cat_name += `${ai !== 0 ? "_" : ""}${a.name}`;
              });
            }
            return e;
          });

          this.pageInfo.total = Number(count);
          if (type) {
            await this.well_timer();
          }
        } else if (code >= 100 && code <= 104) {
          await this.logout();
        } 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 - 200px);
  box-sizing: border-box;
  background: #f0f2f5;
  padding: 16px;
  .workbench-main {

    &__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-bottom: 1px dashed #e6ebf5;
          border-left: 1px dashed #e6ebf5;
          line-height: 20px;
          overflow: hidden;
          width: 100%;
          padding: 10px 12px;
          text-align: center;
          font-size: 12px;
          width:25%;

          &__header{
            display: flex;

            h3{
              font-weight: 700;
              margin-right: 20px;
            }

            p{
              color:#00000072;
            }
          }

          &__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;
          // padding: 0 0 0 5px;
          padding: 5px 0 0 0;
          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);
          }
        }
      }
    }
  }
}

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