<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" :text="textName" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <!-- <Select filterable clearable style='width:200px;margin-right: 10px;' v-model="select.status"
              placeholder="计划状态">
              <Option v-for="item in statusList" :value="item.id">{{item.value}}</Option>
            </Select> -->
            <DatePicker v-model="select.year" style='width:200px;margin-right: 10px;' placeholder="年份"
              placement="bottom" format='yyyy' type="year" @on-change="changeYear"></DatePicker>
            <Input v-model="select.keyword" clearable style="width: 200px;margin-right: 10px;" placeholder="关键字搜索" />
            <Button type="primary" @click="getList">查询</Button>
          </div>
        </slot>
      </lx-header>
    </div>
    <div class="tablewrap">
      <div class="tablemonth">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="selectMonth" @change="changeMonth">
          <el-checkbox v-for="item in allMonths" :label="item"></el-checkbox>
        </el-checkbox-group>
      </div>

      <div class="tablecontent">
        <xy-table :list="list" :total="total" row-key="rowindex" stripe @cell-dblclick="cellClicks"
          @pageSizeChange="e => {select.page_size = e,getList()}" @pageIndexChange="e => {select.page = e,getList()}"
          :table-item="table">
          <template v-slot:btns>
            <el-table-column align='center' label="操作" width="200" header-align="center">
              <template slot-scope="scope">
                <div>
                  <Button type="primary" style='margin-right:5px;margin-bottom:5px;' size="small"
                    @click="editUnit(scope.row,1)">发布任务</Button>
                </div>
                <div>
                  <Button type="primary" style='margin-right:5px;margin-bottom:5px;' size="small"
                    @click="editorPlan(scope.row.id,'editor')">编辑计划</Button>
                </div>
              </template>
            </el-table-column>
          </template>
        </xy-table>
      </div>
    </div>
    <addPlan ref='addPlan' @refresh='getList'></addPlan>
    <addUnit ref='addUnit' @refresh="getList"></addUnit>
    <showPlan ref='showPlan'></showPlan>
  </div>
</template>

<script>
  import addPlan from '../list/components/addPlan.vue'
  import addUnit from '../list/components/addUnit.vue'
  import showPlan from '../list/components/showPlan.vue'
  import {
    listplan,
    del
  } from '@/api/task/plan.js'
  import state from '@/store/modules/user.js'
  export default {
    components: {
      addPlan,
      showPlan,
      addUnit
    },
    data() {
      return {
        textName: '',
        stateObj: {},
        select: {
          keyword: '',
          page: 1,
          page_size: 10,
          // is_myself_audit:0,
          year: '',
          plan_type: '',
          sort_name: '',
          sort_type: '',
          main_admin_id:1,
          month:''
        },
        isIndeterminate: true,
        checkAll: false,
        selectMonth: [],
        allMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        total: 0,
        list: [],
        table: [{
          label: "计划名称",
          prop: 'name',
          align:'left'
        }, {
          label: "任务要求及内容",
          prop: 'content',
          // width: 120,
          align: 'left'
        }, {
          label: "责任人",
          prop: 'main_admin.name',
          width: 120,
        }]
      }
    },
    created() {
      // this.getUserId()
      // this.getLeads()
      this.stateObj = state.state
      console.log("this.stateObj",this.stateObj)
      if(this.stateObj.is_guiji){
        this.select.main_admin_id = 0
      }
      this.select.year = (new Date()).getFullYear() + ''
      let currentMonth = this.allMonths[(new Date()).getMonth()]
      this.selectMonth.push(currentMonth)
      this.select.month = this.selectMonth.join(',')
      this.getList()
    },
    methods: {
      async getList() {
        const res = await listplan({
          ...this.select
        })
        this.list = res.data
        this.total = res.total
      },
      handleCheckAllChange(val) {
        this.selectMonth = val ? this.allMonths : [];
        this.isIndeterminate = false;
        let _arr = []
        this.select.month = this.selectMonth.join(',')
        this.getList()
      },
      changeMonth(e) {
        let checkedCount = e.length;
        this.checkAll = checkedCount === this.allMonths.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.allMonths.length;
        this.select.month = this.selectMonth.join(',')
        this.getList()
      },
      changeYear(e) {
        console.log(e)
        this.select.year = e
      },
      editUnit(row,type){
        this.$refs.addUnit.type="add"
        this.$refs.addUnit.setoutLineId(row.out_line_id)
        this.$refs.addUnit.setMissionPlanId(row.id)

        this.$refs.addUnit.setType(type)
        this.$refs.addUnit.setNameContent(row.name,row.content)
        this.$refs.addUnit.setMenuLevel(row.menu,row.level,row.menu_id,row.level_id)
        this.$refs.addUnit.setMainId(row.main_department_id,row.main_admin_id)
        this.$refs.addUnit.isShow = true
      },
      toUrlUnit(e){
        this.$router.push('/task/list/unit_1')
      },
      editorPlan(id, type) {
        if (type == 'add') {
          this.$refs.addPlan.plan_type = this.select.plan_type
        }
        this.$refs.addPlan.id = id
        this.$refs.addPlan.type = type
        this.$refs.addPlan.isShow = true
      },

      cellClicks(e) {
        this.$refs.showPlan.id = e.row.id
        this.$refs.showPlan.isShow = true
      },
      showPlan(id) {
        this.$refs.showPlan.id = id
        this.$refs.showPlan.isShow = true
      },
    },
    watch: {}
  }
</script>

<style scoped>
  .tablewrap {
    display: flex;
  }

  .tablemonth {
    width: 10%;
    background: #fff;
    padding: 20px;
    margin-right: 1%;
  }

  .tablecontent {
    width: 89%
  }

  /deep/ .v-table .el-table__body .monthName {
    vertical-align: top !important;
  }

  /deep/ .el-icon-circle-close {
    color: #fff
  }

  .expandrow {
    display: flex;
    font-size: 16px;
    padding-left: 50px;
    padding-bottom: 9px;
    flex-wrap: wrap;
  }

  .expandrow p {
    margin-right: 20px;
  }

  .expandrow p span:first-child {
    font-weight: 300;

  }

  ::v-deep .el-table .cell.el-tooltip {
    white-space: normal !important;
    width: 100% !important;
  }

  ::v-deep .el-collapse-item__header {
    padding-left: 30px;
    font-size: 18px;
  }

  /*  /deep/ .el-table__body tr.el-table__row--striped td {
    background-color: #C0C4CC!important;
  } */
</style>
