<template>
  <div class="g-main">
    <div v-show="pageType == 'list'">
      <div class="m-table">
        <div class="flex">
          <div style="align-items: center;justify-items: center;" class="f-align_item flex"
            :class="{ active: selectedIndex === index }" v-for="(item, index) in titleList" :key="item.value"
            @click="selectItem(index)">
            <span>{{ item.label }}</span>
          </div>
        </div>
        <el-table v-if="selectedIndex==0" :data="tableData" border class="m-table-item" style="width: 100%"
          :height="maxTableHeight">
          <el-table-column prop="agencyName" align="center" label="文件名称" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <img style="width: 25px; height: 25px;margin-right: 20px;"
                :src="require(`@/assets/images/index/Excel.png`)" alt="">
              <span>{{ scope.row.agencyName
                }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="taskTitle" label="所属任务" min-width="140" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="taskPeriod" align="center" width="100" label="任务周期" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{ scope.row.taskPeriod === 'once' ? '一次性' : scope.row.taskPeriod === 'weekly' ? '每周' :
              scope.row.taskPeriod
              === 'halfMonth'?'每半月': scope.row.taskPeriod === 'month'?'每月':'每季度'}}
            </template>
          </el-table-column>
          <el-table-column prop="taskStateName" align="center" width="100" label="状态" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span :class="scope.row.taskStateName=='(已保存)未提交'?'yellow':scope.row.taskStateName=='已提交'?'blue':scope.row.taskStateName=='(已驳回)未提交'?'red':'green'">{{ scope.row.taskStateName
                }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totalNum" label="下载人数" align="center" :show-overflow-tooltip="true" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="onClickRecord">{{ scope.row.totalNum}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="agencyName" align="center" label="所属组织" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="createByName" align="center" width="100" label="创建人" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="createdTime" align="center" width="140" :show-overflow-tooltip="true" label="创建时间">
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="200px">
            <template slot-scope="scope">
              <el-button @click=" handleInfo(scope.row)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
       
        </el-table>
        <div v-if="selectedIndex==0">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="pageNo" :page-sizes="[20, 50, 100, 200]" :page-size="parseInt(pageSize)"
            layout="sizes, prev, pager, next, total" :total="total">
          </el-pagination>
        </div>
        <div>
          <data-sharing v-if="selectedIndex==1"></data-sharing>
        </div>
        <div>
          <picture-collection v-if="selectedIndex==2"></picture-collection>
        </div>
    
      </div>
    </div>
    <div v-if="showdownloadRecord">
      <el-dialog title="下载记录" :visible.sync="showdownloadRecord" width="50%" :close-on-click-modal="false">
        <export-shared :showType="showdownloadRecord" :taskId="formData.taskId"></export-shared>
      </el-dialog>
    </div>
    <div v-if="pageType == 'info'">
      <share-excel @handleShowPage="handleShowPage" :workbookId=task></share-excel>
    </div>
  </div>
</template>
  <script>
  import { requestPost, requestGet } from "@/js/dai/request";
  import nextTick from "dai-js/tools/nextTick";
  import { mapGetters } from "vuex";
  import shareExcel from "./cpts/share-excel";
  import excelAdd from "./cpts/excel-add";
  import exportShared from "./cpts/export-shared.vue"
  import dataSharing from "./cpts/data-sharing.vue"
  import pictureCollection from "./cpts/picture-collection.vue"
  import * as echarts from "echarts";
  export default {
    components: { exportShared,dataSharing,pictureCollection,shareExcel},
  
    data() {
      let endDisabledDate = (time) => {
        //这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
        let nowData = Date.now();
        if (this.formData.startTime) {
          let startTime = new Date(this.formData.startTime);
          return (
            time.getTime() > nowData ||
            time.getTime() < startTime ||
            time.getTime() === startTime
          );
        } else {
          return time.getTime() > nowData;
        }
      };
      let startDisabledDate = (time) => {
        //这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
        let nowData = Date.now();
        return time.getTime() > nowData;
      };
      return {
        showdownloadRecord:false,
        selectedIndex: 0, // 记录选中的项
        titleList:[
          {
            value:0,
            label:'任务文件'
          },
          {
            value:1,
            label:'数据共享'
          },
          {
            value:2,
            label:'共享图片集'
          },
        ],
        task: "",
        pageType: "list", // 列表list 新增add 详情info
        tableData: [],
        formData: {
          orgId: '',//组织Id
          taskTitle: '',//任务主题
          taskState: '',//任务类型
          startTime: '',//开始时间
          endTime: '',//结束时间
          createdBy: ''//创建人
        },
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        total: 1,
        sarr: [],
        endPickerOptions: {
          disabledDate: endDisabledDate,
        },
        startPickerOptions: {
          disabledDate: startDisabledDate,
        },
        searchH: 180,
        createdByArray: [],
        statusArray: [
          {
            label: '已完成',
            value: 'resolved'
          },
          {
            label: '已取消',
            value: 'cancel',
          },
          {
            label: '进行中',
            value: 'deal',
          }
        ],
        manager: false
      };
    },
    computed: {
      maxTableHeight() {
              const h = this.clientHeight - this.searchH - 200 + this.iframeHeight;
              const _h = this.clientHeight - 200 - this.searchH;
              return this.$store.state.inIframe ? h : _h;
          },
          ...mapGetters(["clientHeight", "iframeHeight"]),
    },
    watch: {
    },
    async mounted() {
      const user = this.$store.state.user;
      this.getTableData()
    },
    methods: {
      onClickRecord(){
        this.showdownloadRecord=true
      },
      selectItem(index) {
        this.selectedIndex = index; // 选中点击的项
        if(index===0){
          this.getTableData()
        }

      },
      async handleCancel(item) {
        let parms = {
          id: item.id,
        };
        this.$confirm("取消之后无法恢复，确认取消？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            requestPost('/actual/base/communityOneTablePublish/cancelTask', parms).then(res => {
              if (res.code == 0) {
                this.pageNo = 1
                this.getTableData()
              }
            })
          })
          .catch((err) => {
            if (err == "cancel") {
            }
          });
      },
      async getStafflist() {
        let parms = {
          orgId: this.$store.state.user.agencyId,
          orgType: 'agency',
          pageNo: 1,
          pageSize: 100,
        };
        let { data, code } = await requestPost('/data/aggregator/org/stafflist', parms)
        if (code === 0) {
          this.createdByArray = data.staffList;
        }
      },
      handleShowPage() {
        this.pageType = 'list';
        this.getTableData()
      },
      handleAdd() {
        this.pageType = 'add';
        console.log(this.pageType);
      },
      handleInfo(item) {
        console.log(item, "dkljsfdlk");
        this.task = item.workBookId
        this.pageType = 'info'
      },
      getLastItem(list, vals, key) {
        let LIST = list || [];
        for (let item of LIST) {
          // console.log(item[key]);
          for (let i of vals) {
            if (item[key] === i) {
              this.sarr.push(item);
            } else {
              this.getLastItem(item.subAgencyList, vals, key);
            }
          }
        }
      },
      handleSizeChange(val) {
        this.pageSize = val;
        window.localStorage.setItem("pageSize", val);
        this.getTableData();
      },
      handleCurrentChange(val) {
        this.pageNo = val;
        this.getTableData();
      },
      async getTableData() {
        const url = "/actual/base/communityOneTablePublish/page";
        const { pageSize, pageNo, formData } = this;
        const { data, code, msg } = await requestGet(url, {
          pageSize,
          pageNo,
          ...formData
        });
        if (code === 0) {
          this.total = data.total || 0;
          this.tableData = data.list
            ? data.list.map((item) => {
              return item;
            })
            : [];
        } else {
          this.$message.error(msg);
        }
      },
      handleSearch() {
        this.pageNo = 1;
        this.getTableData();
      },
     async handleDel(item){
      let parms = {
          id: item.id,
        };
        this.$confirm("删除之后无法恢复，确认删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            requestPost('/actual/base/communityOneTablePublish/delete', parms).then(res => {
              if (res.code == 0) {
                this.getTableData()
              }
            })
          })
          .catch((err) => {
            if (err == "cancel") {
            }
          });
      },
     async resetSearch() {
        this.$refs.ref_searchform.resetFields();
        this.pageNo = 1;
        const user = this.$store.state.user;
        if (user) {
          if (user.roleList.findIndex(item => item === "manager") !== -1) {
            this.manager = false;
          } else {
            this.manager = true;
            this.formData.createdBy = this.createdByArray.find(item => item.mobile === user.phone).staffId
          }
        }
        this.getTableData();
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  @import "@/assets/scss/modules/management/list-main.scss";

  .m-search {
    .u-item-width-normal {
      width: 200px;
    }


  }

  .yellow {
    color: #ddaa5d;
  }

  .blue {
    color: #4e89ec;
  }

  .red {
    color: #fc2b3b;
  }

  .green {
    color: #2fcbbd;
  }

  .f-align_item {
    width: 100px;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
  }

  .f-align_item.active {
    width: 100px;
    color: blue;
    /* 点击时的文字颜色 */
    font-weight: bold;
    border-bottom: 5px solid blue;
    /* 点击时的下划线 */
  }

  .f-align_item span {
    color: black;
    /* 默认文字颜色 */
  }

  .chart-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .chart {
    width: 100%;
    height: 350px;
  }
</style>