<template>
  <div>
    <div>
      <div ref="lxHeader">
        <LxHeader
          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
        >
          <div slot="content"></div>
          <slot>
            <header-content :auths="auths_auth_mixin">
              <template #search>
                <div style="display: flex">
                  <div style="margin-right:10px">
                    <span>填报状态：</span>
                    <Select v-model="select.status" style="width:120px">
                      <Option v-for="item in statusList"
                      :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                  </div>
                  <div  style="margin-right:10px">
                    <Input v-model="select.keyword" placeholder="请输入关键字" style="width: 150px" />
                  </div>

                  <Button
                    type="primary"
                    @click="$refs['xyTable'].getTableData(true)"
                  >查询</Button
                  >
                </div>
              </template>
              <template #create>
                <Button
                  type="primary"
                  @click="$refs['create'].setType('add'),$refs['create'].show()"
                >新增</Button
                >
              </template>
            </header-content>
          </slot>
        </LxHeader>
      </div>
    </div>

    <xy-table ref="xyTable"
              :table-item="table"
              :auths="auths_auth_mixin"
              :action="index"
              :destroy-action="destroy"
              @editor="row => {
                $refs['create'].setId(row.id);
                $refs['create'].setType('editor');
                $refs['create'].show();
              }"></xy-table>

    <create ref="create" @refresh="$refs['xyTable'].getTableData()"></create>
  </div>
</template>

<script>
import { index,destroy } from "@/api/person"
import { authMixin } from "@/mixin/authMixin";
import headerContent from "@/components/LxHeader/XyContent.vue";
import LxHeader from "@/components/LxHeader/index.vue";
import create from "./component/create.vue"
export default {
  mixins: [authMixin],
  components: {
    headerContent,
    LxHeader,
    create
  },
  data() {
    return {
      select:{
        status:'',
        keyword:''
      },
      statusList:[{
        label:'开启填报',
        value:0
      },{
        label:'关闭填报',
        value:1
      },{
        label:'全部',
        value:2
      }],
      table: [
        {
          type: "index",
          width: 46,
          label: "序号"
        },
        {
          prop: "name",
          label: "姓名",
          width:120
        },
        {
          prop: "department.name",
          label: "部门",
          width: 120
        },
        {
          prop: "person.name",
          label: "清单类型",
          width: 120
        },
        {
          prop: "start_date",
          label: "开始填报日期",
          width: 160
        },
        {
          prop: "end_date",
          label: "结束填报日期",
          width: 160
        },
        {
          prop: "status",
          label: "填报状态",
          width: 160,
          customFn: (row) => {
            return ( <el-switch
              v-model={row.status}
              on = {
                {
                  ['change']: (e) => {

                  }
                }
              }></el-switch>)
            }
        },
        // {
        //   prop: "position",
        //   label: "职位"
        // },
        // {
        //   prop: "is_active",
        //   label: "是否在职",
        //   width: 80,
        //   formatter:(v1,v2,val) => {
        //     return val ? "在职" : "离职"
        //   }
        // },
        {
          prop: "username",
          label: "用户名"
        },

        {
          width: 80,
          prop: "myindex",
          label: "排序"
        }
      ]
    }
  },
  methods: {
    index,destroy,
  },
  computed: {},
}
</script>

<style scoped lang="scss">
</style>
