<template>
  <lay-container fluid="true" style="padding: 20px">
    <lay-row :space="10">
      <lay-col :md="24">
        <lay-card>
          <lay-form style="margin-top: 20px">
            <lay-row>
              <lay-col :md="5">
                <lay-form-item label="月度：" label-width="50">
                  <lay-date-picker type="yearmonth" v-model="searchAccount" placeholder="请选择"
                                   allow-clear></lay-date-picker>
                </lay-form-item>
              </lay-col>
              <lay-col :md="4">
                <lay-form-item label-width="0">
                  <lay-button type="primary" @click="toSearch">查询</lay-button>
                  <lay-button @click="toReset">重置</lay-button>
                </lay-form-item>
              </lay-col>
            </lay-row>
          </lay-form>
        </lay-card>
      </lay-col>
      <lay-col :md="24">
        <lay-card>
          <div style="padding: 10px">
            <span style="font-size: 18px;vertical-align: center;margin-right: 20px">月度自评列表</span>
            <lay-button type="primary" size="sm">导出Excel</lay-button>
          </div>
          <lay-table
              :page="page"
              :columns="columns"
              :dataSource="dataSource"
              :even="true"
              height="600px"
              size="md"
          >
            <template v-slot:id="{ data }">
              {{ data.id }}
            </template>
            <template v-slot:username="{ data }">
              {{ data.username }}
            </template>
            <template v-slot:password="{ data }">
              {{ data.password }}
            </template>
            <template v-slot:operator="{}">
              <span style="color: #00A394;cursor: pointer" @click="visible11 = true">详情</span>
            </template>
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>
  </lay-container>
  <lay-layer v-model="visible11" title="月度自评详情" :type="4" :shade="true" :area="['950px','100%']">
    <lay-container fluid="true" style="padding: 20px">
      <lay-card shadow="always">
        <div style="height: 70px;width: 100%;">
          <lay-step current-status="primary" style="margin: 0 auto" direction="horizontal" :active="active" space="100%" :center="true">
            <lay-step-item>
              <template v-slot:default>
                <div style="font-size: 18px;font-weight: bold;color: #009688">个人自评</div>
                <div style="color: #999999">2025-01-01 14:35:33</div>
              </template>
            </lay-step-item>
            <lay-step-item>
              <template v-slot:default>
                <div style="font-size: 18px;font-weight: bold;color: #009688">科室考评</div>
                <div style="color: #999999"></div>
              </template>
            </lay-step-item>
          </lay-step>
        </div>
      </lay-card>
      <lay-table ref="tableRef6" children-column-name="children" :columns="columns6"
                 :data-source="dataSource6"></lay-table>
    </lay-container>
  </lay-layer>
</template>

<script lang="ts">
import {ref, watch} from 'vue'
import {layer} from '@layui/layer-vue'

export default {
  setup() {
    const active = ref(1)
    const visible11 = ref(false)
    const selectedKeys = ref(['1'])
    const checkbox = ref(true)
    const defaultToolbar = ref(true)
    const page = ref({total: 100, limit: 10, current: 2})
    const columns6 = [
      {
        title: "考评项目",
        width: "100px",
        key: "id"
      },
      {
        title: "分值",
        width: "200px",
        key: "name"
      },
      {
        title: "自评分",
        width: "100px",
        key: "sex"
      }
    ]
    const dataSource6 = [
      {
        id:"10001", name:"张三 1", sex:"男", children: [
          {
            id:"10009", name:"张三 1-1", sex:"男"},
          {
            id:"10012", name:"张三 1-2", sex:"男", children: [
              {id:"10013", name:"张三 1-2-1", sex:"男"},
              {id:"10014", name:"张三 1-2-2", sex:"男"}
            ]
          }
        ]
      }
    ]
    const columns = [
      {
        title: '序号',
        width: '50px',
        customSlot: 'id',
        align: 'center',
        key: 'id'
      },
      {
        title: '月度',
        width: '100px',
        align: 'center',
        customSlot: 'username',
        key: 'username'
      },
      {
        title: '考评对象',
        width: '150px',
        customSlot: 'password',
        align: 'center',
        key: 'password'
      },
      {
        title: '参评时间',
        width: '180px',
        align: 'center',
        key: 'age'
      },
      {
        title: '加分',
        key: 'remark',
        align: 'center',
      },
      {
        title: '扣分',
        key: 'remark',
        align: 'center',
      },
      {
        title: '自评总分',
        key: 'remark',
        align: 'center',
      }, {
        title: '科室评分',
        key: 'remark',
        align: 'center',
      },
      {
        title: '操作',
        width: '180px',
        customSlot: 'operator',
        key: 'operator',
        align: 'center',
        fixed: 'right'
      }
    ]

    const dataSource = [
      {
        id: '1',
        username: 'shana',
        password: '夏娜',
        remark: '1',
        age: '2024-01'
      },
      {
        id: '2',
        username: 'shana',
        password: '夏娜',
        remark: '2',
        age: '2024-01'
      }
    ]

    const rowClick = function (data: any) {
    }

    const rowDoubleClick = function (data: any) {
    }

    const change = function ({current, limit}: any) {
      layer.msg('current:' + current + ' limit:' + limit)
    }

    function toSearch() {
      layer.load(2, {time: 3000})
    }

    const searchAccount = ref('')
    const searchEmail = ref('')

    function toReset() {
      searchAccount.value = ''
      searchEmail.value = ''
    }

    return {
      active,
      dataSource6,
      columns6,
      visible11,
      columns,
      dataSource,
      selectedKeys,
      checkbox,
      defaultToolbar,
      page,
      rowClick,
      rowDoubleClick,
      change,
      toReset,
      toSearch,
      searchAccount,
      searchEmail
    }
  }
}
</script>
<style>
.layui-table-header .layui-table-cell {
  background-color: #ECF8FA !important;
}
</style>
