<template>
  <div>
    <div class="basicHeader">
      <el-button icon="el-icon-download" type="primary" @click="addModle">
        新建模板
      </el-button>
    </div>
    <div style="margin: 0 15px">
      <el-table
        :data="tableData"
        border
        stripe
        :header-cell-style="headClass"
        height="42rem"
      >
        <el-table-column
          prop="reportName"
          label="报告名称"
          width=""
        ></el-table-column>
        <el-table-column
          prop="reportDate"
          label="报告生成日期"
          width=""
        ></el-table-column>
        <el-table-column
          prop="proposal"
          label="是否人工填写优化建议"
          width=""
        ></el-table-column>
        <el-table-column
          prop="mailbox"
          label="是否自动发送邮件"
          width=""
        ></el-table-column>
        <el-table-column
          prop="state"
          label="当前状态"
          width=""
        ></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              style="color: #409eff"
              @click.prevent="Update(scope.row)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
// import { useStore } from "vuex";
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'deviationTable',
  components: {},
  props: {},
  setup(props, { emit }) {
    props
    const Update = (row) => {
      console.log('', row)
    }

    const addModle = () => {
      const params = {
        modleBool: false,
      }
      emit('modle', params)
    }

    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA !important;color: black;'
    }

    return {
      headClass,
      Update, //修改偏差配置事件
      addModle, //新增模板事件
      tableData: [
        {
          reportName: '05-01',
          reportDate: 'Tom',
          proposal: '',
          mailbox: '',
          state: '',
        },
      ],
    }
  },
})
</script>