<template>
  <div class="app-warp">
    <div class="app-structure">
      <div class="app-search">
        <!-- <el-form :inline="true" :model="formInline" class="">
          <el-form-item v-show="!searchFromCollapse" label="审批人:" >
            <el-input v-model="formInline.user" placeholder="审批人"/>
          </el-form-item>
          <el-form-item v-show="!searchFromCollapse" label="审批人:">
            <el-input v-model="formInline.user" placeholder="审批人"/>
          </el-form-item>
          <el-form-item v-show="!searchFromCollapse" label="审批人:">
            <el-input v-model="formInline.user" placeholder="审批人"/>
          </el-form-item>
          <el-form-item v-show="!searchFromCollapse" label="审批人:">
            <el-input v-model="formInline.user" placeholder="审批人"/>
          </el-form-item>
          <el-form-item v-show="!searchFromCollapse" label="审批人:">
            <el-input v-model="formInline.user" placeholder="审批人"/>
          </el-form-item>
          <el-form-item label="审批人:">
            <el-input v-model="formInline.user" placeholder="审批人"/>
          </el-form-item>
          <el-form-item label="活动区域:">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"/>
              <el-option label="区域二" value="beijing"/>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button icon="el-icon-refresh">重置</el-button>
            <el-button v-if="searchFromCollapse==true" type="text" @click="searchFromCollapse = false">展开 <i class="el-icon-arrow-down"/></el-button>
            <el-button v-else type="text" @click="searchFromCollapse = true">合并 <i class="el-icon-arrow-up"/></el-button>
          </el-form-item>
        </el-form> -->
        <el-form :inline="true" :model="formInline" class="app-search-form">
          <div class="form-item">
            <label>审批批人:</label>
            <el-input v-model="formInline.user" placeholder="审批批人"/>
          </div>
          <div class="form-item">
            <label>审批批人:</label>
            <el-input v-model="formInline.user" placeholder="审批批人"/>
          </div>
          <div v-show="!searchFromCollapse" class="form-item">
            <label>审批批人:</label>
            <el-input v-model="formInline.user" placeholder="审批批人"/>
          </div>
          <div v-show="!searchFromCollapse" class="form-item">
            <label>审批批人:</label>
            <el-input v-model="formInline.user" placeholder="审批批人"/>
          </div>
          <div v-show="!searchFromCollapse" class="form-item">
            <label>审批批人:</label>
            <el-input v-model="formInline.user" placeholder="审批批人"/>
          </div>
          <div class="form-item text-right">
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button icon="el-icon-refresh">重置</el-button>
            <el-button v-if="searchFromCollapse==true" type="text" @click="searchFromCollapse = false">展开 <i class="el-icon-arrow-down"/></el-button>
            <el-button v-else type="text" @click="searchFromCollapse = true">合并 <i class="el-icon-arrow-up"/></el-button>
          </div>

        </el-form>
      </div>
      <div class="app-tools">
        <div class="app-function">
          <el-button type="primary" icon="el-icon-plus">新增</el-button>
          <el-button type="danger" icon="el-icon-delete" plain>批量删除</el-button>
        </div>
        <div class="app-minbtn">
          <span class="screening">
            <el-dropdown trigger="click">
              <el-button type="text" icon="el-icon-finished"/>
              <el-dropdown-menu slot="dropdown" style="margin-top:3px;">
                <div class="app-checkbox-group">
                  <el-checkbox-group v-model="checkList" >
                    <el-checkbox label="复选框 A" style="display:block;"/>
                    <el-checkbox label="复选框 B" style="display:block;"/>
                    <el-checkbox label="复选框 C" style="display:block;"/>
                    <el-checkbox label="禁用" disabled style="display:block;"/>
                    <el-checkbox label="选中且禁用" disabled style="display:block;"/>
                  </el-checkbox-group>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </span>

          <el-button type="text" icon="el-icon-refresh-left"/>
          <el-button type="text" icon="el-icon-full-screen"/>
        </div>
      </div>
      <div class="app-container">
        <el-table
          :data="tableData"
          :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
          border
          style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
            width="50"
            align="center"
          />
          <el-table-column
            prop="name"
            label="考核指标名称"
          />
          <el-table-column
            prop="dj"
            label="考核细则"
          />
          <el-table-column
            prop="fs"
            label="分值"
          />
          <el-table-column
            prop="fstype"
            label="分值类型"
          />
          <el-table-column
            label="操作"
            width="300"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="dialogTableVisible = true">查看</el-button>
              <span class="app-divider"/>
              <el-button type="text" @click="dialogFormVisible = true">修改</el-button>
              <span class="app-divider"/>
              <el-button type="text" ><span class="color-red">删除</span></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-btn-group">
        <div>
          <!-- <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogFormVisible = true">新增</el-button> -->
        </div>
        <el-pagination
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          :total="100"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>

    <el-dialog :visible.sync="dialogFormVisible" title="新增" top="80px" width="800px">
      <el-form :model="form" class="dformwith">
        <el-form-item :label-width="formLabelWidth" label="考核指标名称">
          <el-input v-model="form.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="考核细则">
          <el-input v-model="form.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="分值类型">
          <el-select v-model="form.region" placeholder="请选择分值类型">
            <el-option label="加分" value="shanghai"/>
            <el-option label="减分" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="分值">
          <el-input v-model="form.name" autocomplete="off" style="width:215px"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogTableVisible" title="查看" top="80px" width="800px">
      <div>
        <el-table
          border
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="50"/>
          <el-table-column
            prop="date"
            label="考核指标名称"
          />
          <el-table-column
            prop="xz"
            label="考核细则"
            width="180"/>
          <el-table-column
            prop="address"
            label="分值"/>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      formInline: {
        user: '',
        region: ''
      },
      checkList: [],
      searchFromCollapse: true,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      tableData: [
        {
          name: '危险源分级管控',
          dj: '未开展危险源辨识及风险评价',
          fs: '-3',
          fstype: '减分'
        },
        {
          name: '危险源分级管控',
          dj: '未确定危险源监控等级',
          fs: '-1',
          fstype: '减分'
        },
        {
          name: '危险源分级管控',
          dj: '对危险源分别搭建，实行动态闭环管理。',
          fs: '1',
          fstype: '加分'
        },
        {
          name: '隐患整治',
          dj: '建立隐患档案，跟踪到位。',
          fs: '-2',
          fstype: '减分'
        },
        {
          name: '隐患整治',
          dj: '对排查的隐患整改落实不力',
          fs: '-2',
          fstype: '减分'
        },
        {
          name: '标准化管理',
          dj: '按照标准化管理要求，生产现场要求做到安全通道、照明、通风、降温、消防。',
          fs: '2.5',
          fstype: '加分'
        },
        {
          name: '标准化管理',
          dj: '对生产现场安全标志、标识粘贴醒目、规范。',
          fs: '1',
          fstype: '加分'
        },
        {
          name: '标准化管理',
          dj: '对生产现场安全标志、标识不按照但求设置的。',
          fs: '-1',
          fstype: '减分'
        },
        {
          name: '安全技能培训',
          dj: '未做有效的员工安全及鞥培训',
          fs: '-2',
          fstype: '减分'
        },
        {
          name: '安全技能培训',
          dj: '抽查员工应会不掌握的每一人',
          fs: '-1',
          fstype: '减分'
        }
      ],
      value: '',
      valuea: '',
      valueb: ''
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    }
  }
}
</script>

<style>

</style>
