<template>
  <normalLayout @onRefresh="targetChange">
    <div slot="titleRight">
      <el-button type="primary" plain size="small" @click="export1" v-if="tool.checkAuth($route.name,'export')">导出</el-button>
    </div>
    <div slot="content">
      <div class="personal-target">
        <div class="container normal-panel">
          <select-panel
              :placeholder="placeholder"
              :yearData="yearData"
              @yearChange="yearChange"
              @targetChange="targetChange"
              @clearTarget="targetClear"
              @searchActive="searchActive"
              @clearData="searchClear"
          />
          <Table ref="table">
<!--            <template v-slot:detail="scope">
              <el-button v-if="tool.checkAuth($route.name,'read')" type="text" size="small" @click="$store.dispatch('DrawerShowChange',true),$router.push({path:'/PersonalDetail',query:{id:scope.data.data.hrid,year:scope.data.year}})">详情</el-button>
            </template>-->
          </Table>
        </div>
        <!--抽屉面板-->
        <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :with-header="false"
            direction="rtl"
            size="90%"
            append-to-body
            @close="closeDrawer">
          <div class="detail__panel">
            <router-view/>
          </div>
        </el-drawer>
      </div>
    </div>
  </normalLayout>

</template>

<script>
import {mapGetters} from 'vuex'

import Header from '@/SManagement/archives_upload/components/Header';
import selectPanel from '@/SManagement/project_target/components/selectPanel'
import Table from './components/table'
export default {
  name: '',
  data() {
    return {
      yearData:[],
      tablecols:'',
      placeholder:'请输入姓名/部门',
      list:'',
      reslut:'',
      drawer:false
    };
  },
  components: { Header, selectPanel , Table},
  watch: {
    $route (val) {
      if (val.path == '/sm_personalTarget') {
        this.$refs.table.queryData()
      }
    },
    DrawerShow (val) {
      val ? this.drawer = true : this.drawer = false
    }
  },
  computed: {
    ...mapGetters({
      DrawerShow:'DrawerShow'
    })
  },
  created() {
  },
  methods: {
    closeDrawer () {
      this.$router.push('/sm_personalTarget')
      this.$store.dispatch('DrawerShowChange',false)
    },
    yearChange(data) {
      this.$refs.table.year = data
    },
    async yearList(siteid){
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.optiontype.optiontype",
        "method": "optiontypeselect",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "typename": "targetyearofpersonal",
          "parameter": {
            "siteid": siteid
          }
        }
      })
      this.yearData = res.data
      console.log(this.yearData,'人员目标年度')
    },
    targetChange(data) {
      this.$refs.table.params.content.type = data
      this.$refs.table.queryData()
    },
    targetClear() {
      this.$refs.table.params.content.type = ''
      this.$refs.table.queryData()
    },
    searchActive(data) {
      this.$refs.table.params.content.where.condition = data
      this.$refs.table.queryData()
    },
    searchClear() {
      this.$refs.table.params.content.where.condition = ''
      this.$refs.table.queryData()
    },
    async export1() {
      if(!Object.keys(this.$refs.table.tableData).length > 0) return
      let res = await this.$api.requested({
        "id": 20220916095402,
        "content": {
            "row": this.$refs.table.tableData
        }
      })
      this.tool.showMessage(res,() => {
       /* window.open(res.msg,'_self')*/
        window.open(res.data,'_self')
      })
    }
  },
  mounted() {
    const siteid = JSON.parse(sessionStorage.getItem('active_account')).siteid
    this.yearList(siteid)
  }
};
</script>

<style scoped>
*{
  box-sizing: border-box;
}
  .base-target {
    width: 100%;
    padding: 0 15px;
    border: 1px solid #c0c4cc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    border-radius: 5px;
    background: #ffffff;
  }
  .base-target input {
    border: 0 none;
    outline: none;
    height: 32px;
    width: 100%;
  }
</style>
