<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" :text="'任务计划'" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <Input v-model="select.keyword" clearable style="width: 200px;margin-right: 10px;" placeholder="关键字搜索" />
            <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>
            <!-- <Select filterable clearable style='width:200px;margin-right: 10px;' v-model="select.mission_id" placeholder="专项任务">
              <Option v-for="item in missionList" :value="item.id">{{item.name}}</Option>
            </Select> -->

            <Button type="primary" @click="getList">查询</Button>
            <Button icon="ios-add" type="primary" style="margin-left: 10px;" @click="$refs['addPlan'].isShow=true,$refs['addPlan'].type='add'">添加</Button>
          </div>
        </slot>
      </lx-header>
    </div>
      <!-- @cell-click="cellClicks" -->
    <xy-table
      :list="list"
      :total="total"
      stripe
      @pageSizeChange="e => {select.page_size = e,getList()}"
      @pageIndexChange="e => {select.page = e,getList()}"
      :table-item="table">
      <!-- <template v-slot:btns>
        <el-table-column fixed="right" align='center' label="操作" min-width="180" header-align="center">
          <template slot-scope="scope">
            <Button type="primary" style='margin-right:5px;margin-bottom:5px;' size="small" @click="showPatrol(scope.row.id,'show')">查看</Button>
            <Button v-if='scope.row.status==0&&(is_guiji||is_chuzhang||login_id==scope.row.admin_id)' type="primary" style='margin-right:5px;margin-bottom:5px;' size="small" @click="editorPatrol(scope.row.id,'editor')">编辑</Button>
            <Button v-if="scope.row.status==1&&((scope.row.check_leader==1&&is_leader)||(scope.row.check_main==1&&is_main_leader))" type="primary" style='margin-right:5px;margin-bottom:5px;' size="small" @click="showPatrol(scope.row.id,'leader')">领导确认</Button>
            <Button v-if="scope.row.status==9&&((scope.row.re_check_leader==1&&is_leader)||(scope.row.re_check_main==1&&is_main_leader))" type="primary" style='margin-right:5px;margin-bottom:5px;' size="small" @click="showPatrol(scope.row.id,'leaderconfirm')">领导确认整改</Button>
          </template>
        </el-table-column>
      </template> -->

      </xy-table>
      <addPlan ref='addPlan' @refresh='getList'></addPlan>
  </div>
</template>

<script>
  import addPlan from '../list/components/addPlan.vue'
  import {
    listplan,del,leads
  } from '@/api/task/plan.js'

  export default{
    components:{
      addPlan
    },
    data(){
      return{
        select:{
          keyword:'',
          page:1,
          page_size:10,
          status:'',
          myself:0,
          mission_id:''
          // myself_update:0
        },
        total:0,
        statusList:[{
          id:-1,
          value:'已撤回'
        },{
          id:0,
          value:'待审核'
        },{
          id:1,
          value:'待领导确认'
        },{
          id:2,
          value:'已分发,待接收'
        },{
          id:3,
          value:'已接收'
        },{
          id:4,
          value:'提交整改'
        },{
          id:5,
          value:'已整改'
        },{
          id:6,
          value:'不通过'
        },{
          id:7,
          value:'整改不通过,重新整改'
        },{
          id:8,
          value:'部门退回'
        },{
          id:9,
          value:'待领导确认整改'
        }],
        table:[{
          label:"任务专题",
          prop:'mission.name',
          align:'left',
          fixed:'left',
          width:240
        },{
          label:"检查日期",
          prop:'date',
          width:180,
        },{
          label:"状态",
          prop:'status',
          width:180,
          formatter:(cell,data,value,index)=>{
            for(var item of this.statusList){
              if(item.id==value){
                return item.value
              }
            }
          }
        },{
          label:"问题类型",
          prop:'ask.value',
          width:180,
        },{
          label:"地点",
          prop:'site.name',
          width:180,
        },{
          label:"问题图片",
          prop:'files',
          width:240,
          customFn: (row) => {
            let arr = []
            return ( <div style = {
              {
                whiteSpace:'normal'
              }
            }>{
              row.files.map(item=>{
                arr.push(item.url)
                return (
                <el-image
                  style={
                    {
                      width:'60px',
                      height:'60px',
                      marginLeft:'5px'
                    }
                  }
                  src = {
                    item.url
                  }
                  preview-src-list={
                    arr
                  }
                ></el-image>)
              })
            }
             </div>)
          }
        },{
          label:"计划完成日期",
          prop:'plan_end_date',
          width:180,
        },{
          label:"整改完成日期",
          prop:'fix_end_date',
          width:180,
        },{
          label:"整改图片",
          prop:'fix_files',
          width:240,
          customFn: (row) => {
            let arr = []
            return ( <div style = {
              {
                whiteSpace:'normal'
              }
            }>{
              row.fix_files.map(item=>{
                arr.push(item.url)
                return (
                <el-image
                  style={
                    {
                      width:'60px',
                      height:'60px',
                      marginLeft:'5px'
                    }
                  }
                  src = {
                    item.url
                  }
                  preview-src-list={
                    arr
                  }
                ></el-image>)
              })
            }
             </div>)
          }
        },{
          label:"上报人",
          prop:'admin.name',
          width:180,
        }],
        list:[],
      }
    },
    created(){
      this.getList()
    },
    methods: {
      async getList(){
         const res = await listplan({...this.select})
         this.list = res.data
         this.total = res.total
      },
      pageChange(){},

      editorPatrol(id,type){
        this.$refs.addPlan.id= id
        this.$refs.addPlan.type= type
        this.$refs.addPlan.isShow = true
      },
      deleteList(id){
        var that = this;
        if (id) {
          this.$Modal.confirm({
            title: '确认要删除数据？',
            onOk: () => {
              del(id).then(response => {
                this.$Message.success('操作成功');
                that.getList();
              }).catch(error => {
                console.log(error)
                reject(error)
              })
            },
            onCancel: () => {
              //this.$Message.info('Clicked cancel');
            }
          });
        }
      }
    },
    watch:{}
  }
</script>

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