<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="警示资料管理" name="datamanage">
      <div>
        <div class="tool-wrapper">
          <el-button type="primary" @click="addDialogData">新增</el-button>
          <el-button type="warning" :disabled="isEditable" @click="editDialogData">编辑</el-button>
          <el-button type="danger" :disabled="isDeleteable" @click="deleteDialogData">删除</el-button>
        </div>
        <div class="search-wrapper">
          <!--时间、题目、类别、上传人-->
          <el-date-picker
            v-model="searchTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-input v-model="searchTitle" style="width: 180px;margin-left: 20px;" placeholder="请输入题目" />
          <el-select v-model="searchType" placeholder="请选择类别" style="margin-left: 20px;">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input v-model="searchPerson" style="width: 180px;margin-left: 20px;" placeholder="请输入上传人" />
          <el-button type="success" style="margin-left: 20px;">查询</el-button>
        </div>
        <el-table
          :data="warnList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            prop="type"
            label="类别"
            width="180"
          />
          <el-table-column
            prop="title"
            label="标题"
            width="180"
          />
          <el-table-column
            prop="introduce"
            label="简介"
            width="180"
          />
          <el-table-column
            prop="uploader"
            label="上传人"
            width="180"
          />
          <el-table-column
            prop="uploadtime"
            label="上传时间"
            width="180"
          />
        </el-table>
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="curPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalColumn"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <el-dialog
          title="新增警示教育"
          :visible.sync="addDialogFormVisible"
        >
          <el-form
            ref="addDataForm"
            :model="addFormInfo"
            :rules="rules"
          >
            <el-form-item
              prop="type"
              label="类别"
              :label-width="'120px'"
            >
              <el-select v-model="addFormInfo.type" placeholder="请选择类别">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-button type="info" @click="addType">新增类别</el-button>
            </el-form-item>
            <el-form-item
              prop="title"
              label="题目"
              :label-width="'120px'"
            >
              <el-input v-model="addFormInfo.title" :maxlength="50" />
            </el-form-item>
            <el-form-item
              prop="introduce"
              label="简介"
              :label-width="'120px'"
            >
              <el-input v-model="addFormInfo.introduce" :maxlength="50" />
            </el-form-item>
            <div class="upload-file-wrapper">
              <div class="file-wrapper">
                <label style="width: 100%; height: 100%;">
                  选择要上传的文件
                  <input ref="addDataFileRef" type="file" hidden>
                </label>
              </div>
              <el-progress :percentage="addFormUploadPercentage" />
            </div>
          </el-form>
          <div slot="footer">
            <el-button @click="cancelAddForm">取消</el-button>
            <el-button type="primary" @click="uploadAddForm">上传</el-button>
          </div>
        </el-dialog>
        <el-dialog
          title="编辑警示教育"
          :visible.sync="editDialogFormVisible"
        >
          <el-form
            ref="editDataForm"
            :model="addFormInfo"
            :rules="rules"
          >
            <el-form-item
              prop="type"
              label="类别"
              :label-width="'120px'"
            >
              <el-select v-model="editFormInfo.type" placeholder="请选择类别">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              prop="title"
              label="题目"
              :label-width="'120px'"
            >
              <el-input v-model="editFormInfo.title" :maxlength="50" />
            </el-form-item>
            <el-form-item
              prop="introduce"
              label="简介"
              :label-width="'120px'"
            >
              <el-input v-model="editFormInfo.introduce" :maxlength="50" />
            </el-form-item>
            <div class="upload-file-wrapper">
              <div class="file-wrapper">
                <label style="width: 100%; height: 100%;">
                  选择要上传的文件
                  <input ref="editDataFileRef" type="file" hidden>
                </label>
              </div>
              <el-progress :percentage="editFormUploadPercentage" />
            </div>
          </el-form>
          <div slot="footer">
            <el-button @click="cancelEditForm">取消</el-button>
            <el-button type="primary" @click="uploadEditForm">上传</el-button>
          </div>
        </el-dialog>
      </div>
    </el-tab-pane>
    <el-tab-pane label="观看记录管理" name="recordmanage">
      <div class="tools-wrapper">
        <el-date-picker
          v-model="recordSearchTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <el-input v-model="recordSearchUser" placeholder="请输入用户名" style="width: 240px;margin-left: 20px;" />
        <el-input v-model="recordSearchEnter" placeholder="请输入企业名" style="width: 240px;margin-left: 20px;" />
        <el-button type="success" style="margin-left: 20px;">查询</el-button>
        <el-button type="primary" @click="exportFile">导出</el-button>
      </div>
      <el-table
        :data="recordList"
      >
        <el-table-column
          prop="userName"
          label="用户名"
          width="100"
        />
        <el-table-column
          prop="company"
          label="所属企业"
          width="100"
        />
        <el-table-column
          prop="companyCommunity"
          label="所属区域"
          width="100"
        />
        <el-table-column
          prop="companyIndus"
          label="企业所属行业"
          width="100"
        />
        <el-table-column
          prop="recordTitle"
          label="标题"
          width="150"
        />
        <el-table-column
          prop="recordType"
          label="类别"
          width="100"
        />
        <el-table-column
          prop="recordTime"
          label="观看时间"
          width="100"
        />
      </el-table>
      <el-pagination
        :page-sizes="[10, 20, 30, 40]"
        :page-size="curRecordPageSize"
        :current-page="curRecordPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="curRecordTotal"
        @size-change="handleRecordSizeChange"
        @current-change="handleRecordCurrentChange"
      />
    </el-tab-pane>
  </el-tabs>

</template>

<script>
export default {
  data() {
    return {
      warnList: [
        {
          type: '不知道1',
          title: '不知道2',
          introduce: '不知道3',
          uploader: '不知道4',
          uploadtime: '不知道5'
        },
        {
          type: 'unknow1',
          title: 'unknow2',
          introduce: 'unknow3',
          uploader: 'unknow4',
          uploadtime: 'unknow5'
        }
      ],
      multipleSelection: [],
      typeList: [
      ],
      // 时间 、题目 、 类别、 上传人
      searchTime: '',
      searchTitle: '',
      searchType: '',
      searchPerson: '',
      formInfo: {
        type: '',
        title: '',
        introduce: '',
        uploader: '',
        uploadTime: ''
      },
      currentPage: 1,
      curPageSize: 10,
      totalColumn: 40,
      activeName: 'recordmanage',
      isEditable: false,
      isDeleteable: false,
      recordSearchTime: '',
      recordSearchUser: '',
      recordSearchEnter: '',
      recordList: [
        {
          userName: '1',
          company: '2',
          companyCommunity: '1',
          companyIndus: '2',
          recordTitle: '1',
          recordType: '2',
          recordTime: '1'
        },
        {
          userName: '3',
          company: '4',
          companyCommunity: '3',
          companyIndus: '4',
          recordTitle: '3',
          recordType: '4',
          recordTime: '3'
        }
      ],
      curRecordPageSize: 10,
      curRecordPage: 1,
      curRecordTotal: 40,
      addDialogFormVisible: false,
      addFormInfo: {
        type: '', // 类型
        title: '', // 标题
        introduce: '', // 简介
        fileName: '', // 文件名
        userId: 1 // 上传人
      },
      rules: {
        type: [
          { required: true, message: '请输入类别', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入简介', trigger: 'blur' }
        ]
      },
      addFormUploadPercentage: 0,
      editFormUploadPercentage: 0,
      editDialogFormVisible: false,
      editFormInfo: {
        type: '',
        title: '',
        introduce: '',
        fileName: '',
        userId: 1
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      // 每页多少条
      this.curPageSize = val
    },
    handleCurrentChange(val) {
      // 当前是多少页
      this.currentPage = val
    },
    exportFile() {
      // 导出文件
    },
    handleRecordSizeChange(val) {
      this.curRecordPageSize = val
    },
    handleRecordCurrentChange(val) {
      this.curRecordPage = val
    },
    cancelAddForm() {
      this.addFormInfo.type = ''
      this.addFormInfo.title = ''
      this.addFormInfo.introduce = ''
      this.addFormInfo.fileName = ''
      this.addFormInfo.userId = ''
      this.addDialogFormVisible = false
    },
    uploadAddForm() {
      // formData
      // multipart/formdata
      //
    },
    addDialogData() {
      this.addFormInfo.type = ''
      this.addFormInfo.title = ''
      this.addFormInfo.introduce = ''
      this.addFormInfo.fileName = ''
      // 获取用户id
      this.addFormInfo.userId = 0
      this.addDialogFormVisible = true
    },
    // 编辑对话框
    editDialogData() {
      //
      // editDialog
      this.editDialogFormVisible = true
    },
    // 删除对话框
    deleteDialogData() {
      //
      this.$confirm('此操作将删除选中项, 是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.isEditable = true
      this.isDeleteable = true
      if (this.multipleSelection.length === 1) {
        this.isEditable = false
      }
      if (this.multipleSelection.length > 0) {
        this.isDeleteable = false
      }
    },
    addType() {
      // 跳转到新增页面
      this.$router.push({
        path: 'warn/warntype'
      })
    },
    cancelEditForm() {
      this.editDialogFormVisible = false
    },
    uploadEditForm() {
      // formdata axios
    }
  }
}
</script>

<style lang="scss" scoped>
  .search-wrapper {
    display: flex;
    margin: 20px 0;
  }
  .tools-wrapper {
    display: flex;
    margin: 20px 0;
  }
  .upload-file-wrapper {
    display: flex;
    .file-wrapper {
      width: 240px;
      height: 100px;
      background: aliceblue;
    }
  }
</style>
