<template>
  <div>
    <div class="d-flex flex-between">
      <div>
        <el-button type="primary" size="medium" @click="createNew">
          <span class="d-in-block v-mid el-icon-plus font-size-16"></span>
          <span class="d-in-block v-mid font-size-16">新建考核</span>
        </el-button>
        <el-button :disabled="multipleSelection.length == 0" type="danger" size="medium" @click="batchDel">
          <span class="d-in-block v-mid font-size-16">批量删除</span>
        </el-button>
      </div>

      <el-form label-width="100px" :inline="true">
        <el-form-item prop="keyword">
          <el-input
              placeholder="请输入搜索关键字"
              v-model="keyword">
          </el-input>
        </el-form-item>
        <el-button type="primary" class="ml5">搜索</el-button>
      </el-form>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="我创建的" name="first">
        <el-table :data="createTable" ref="multipleTable" @selection-change="handleSelectionChange"
                  tooltip-effect="dark" style="width: 100%">
          <el-table-column type="selection" align="center" width="55">
          </el-table-column>
          <el-table-column
              label="序号"
              align="center"
              type="index"
              width="50">
          </el-table-column>
          <el-table-column
              label="标题"
              show-overflow-tooltip
              prop="pjkh_title"
              width="auto"
          >
          </el-table-column>
          <el-table-column
              label="考核类型"
              width="150"
              prop="pjkh_khlx"
          ></el-table-column>
          <el-table-column
              label="创建日期"
              width="150"
              prop="pjkh_cjsj"
          ></el-table-column>
          <el-table-column
              label="测评开始-结束时间"
              align="center"
              width="220">
            <template v-slot="scope">
              {{ scope.row.pjkh_cpkssj }} ~ {{ scope.row.pjkh_cpjssj }}
            </template>
          </el-table-column>

          <el-table-column
              label="已提交分数"
              align="center"
              prop="pjkh_ytjfs"
              width="150">
          </el-table-column>
          <el-table-column
              label="状态"
              width="100" prop="pjkh_zt">
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                  type="text"
                  @click="detailData(scope.row)"
              >预览
              </el-button>
              <el-button
                  type="text"
                  @click="editData(scope.row)"
              >编辑
              </el-button>
              <el-button
                  :disabled="scope.row.pjkh_zt_option_k > 1"
                  type="text"
                  @click="publishData(scope.row)"
              >发布
              </el-button>
              <el-button
                  type="text"
                  @click="delData(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="我参与的" name="second">
        <el-table :data="auditTable" tooltip-effect="dark" style="width: 100%">
          <el-table-column
              label="序号"
              align="center"
              type="index"
              width="50">
          </el-table-column>
          <el-table-column
              label="标题"
              show-overflow-tooltip
              prop="pjkh_title"
              width="auto"
          >
          </el-table-column>
          <el-table-column
              label="考核类型"
              width="150"
              prop="pjkh_khlx"
          ></el-table-column>
          <el-table-column
              label="创建日期"
              width="150"
              prop="pjkh_cjsj"
          ></el-table-column>
          <el-table-column
              label="测评开始-结束时间"
              align="center"
              width="220">
            <template v-slot="scope">
              {{ scope.row.pjkh_cpkssj }} ~ {{ scope.row.pjkh_cpjssj }}
            </template>
          </el-table-column>

          <el-table-column
              label="已提交分数"
              align="center"
              prop="pjkh_ytjfs"
              width="150">
          </el-table-column>
          <el-table-column
              label="状态"
              width="100" prop="pjkh_zt">
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                  type="text"
                  @click="detailData(scope.row)"
              >预览
              </el-button>
              <el-button
                  type="text"
                  @click="editData(scope.row)"
              >编辑
              </el-button>

              <el-button
                  type="text"
                  :disabled="scope.row.pjkh_zt_option_k > 1"
                  @click="publishData(scope.row)"
              >发布
              </el-button>
              <el-button
                  type="text"
                  @click="delData(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <footer
        class="flex-item-none"
        style="display: flex;justify-content: flex-end;margin-top: 30px;"
    >
      <el-pagination
          background
          layout="total,prev, pager, next"
          :page-size="limit"
          :total="total"
          :current-page.sync="cur_page"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </footer>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="750px">
      <el-form :model="dialogForm" label-width="120px">
        <el-form-item label="考核名称：" prop="pjkh_title">
          <el-input v-model="dialogForm.pjkh_title" placeholder="请输入标题"></el-input>
        </el-form-item>

        <el-form-item label="考核类型：" prop="pjkh_khlx">
          <el-input v-model="dialogForm.pjkh_khlx" placeholder="请输入考核类型"></el-input>
        </el-form-item>
        <el-form-item label="创建日期：" prop="pjkh_cjsj">
          <el-date-picker
              style="width: 610px"
              v-model="dialogForm.pjkh_cjsj"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="测评开始：" prop="pjkh_cpkssj">
          <el-date-picker
              style="width: 610px"
              v-model="dialogForm.pjkh_cpkssj"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="测评结束：" prop="pjkh_cpjssj">
          <el-date-picker
              style="width: 610px"
              v-model="dialogForm.pjkh_cpjssj"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考核须知：" prop="pjkh_content">
          <Tinymce :key="timestamp" v-if="dialogFormVisible" v-model="dialogForm.pjkh_content" :height="300"></Tinymce>
        </el-form-item>
        <el-form-item label="考核项目：">
          <el-radio-group v-model="dialogForm.pjkh_khxm">
            <el-radio v-for="item in xmList" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="考核组成员：">
          <el-select
              style="width: 100%"
              multiple
              v-model="dialogForm.pjkh_khzcy"
              placeholder="请选择考核组成员"
          >
            <el-option
                multiple
                v-for="item in userList"
                :key="item.user_id"
                :label="item.user_realname"
                :value="item.user_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="被考核组成员：">
          <el-select
              style="width: 100%"
              multiple
              v-model="dialogForm.pjkh_bkhcy"
              placeholder="请选择考核组成员"
          >
            <el-option
                multiple
                v-for="item in userList"
                :key="item.user_id"
                :label="item.user_realname"
                :value="item.user_id"
            >
            </el-option>
          </el-select>

        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="formSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="考核详情" :visible.sync="dialogDetailVisible" width="600px">
      <div class="pop-content">
        <div class="mt15 d-flex">
          <div class="font-size-16">考核名称：</div>
          <div class="flex-1 font-size-16">{{detailInfo.pjkh_title}}</div>
        </div>
        <div class="mt15 d-flex">
          <div class="font-size-16">考核类型：</div>
          <div class="flex-1 font-size-16">{{detailInfo.pjkh_khlx}}</div>
        </div>
        <div class="mt15 d-flex">
          <div class="font-size-16">创建日期：</div>
          <div class="flex-1 font-size-16">{{detailInfo.pjkh_cjsj}}</div>
        </div>
        <div class="mt15 d-flex">
          <div class="font-size-16">测评开始：</div>
          <div class="flex-1 font-size-16">{{detailInfo.pjkh_cpkssj}}</div>
        </div>
        <div class="mt15 d-flex">
          <div class="font-size-16">测评结束：</div>
          <div class="flex-1 font-size-16">{{detailInfo.pjkh_cpjssj}}</div>
        </div>
        <div class="mt15 d-flex">
          <div class="font-size-16">考核须知：</div>
          <div class="flex-1 font-size-16" v-html="detailInfo.pjkh_content"></div>
        </div>
        <div class="mt15 d-flex">
          <div class="font-size-16">考核项目：</div>
          <div class="flex-1 font-size-16">
            <span v-if="detailInfo.pjkh_khxm == 1">打分测评</span>
            <span v-if="detailInfo.pjkh_khxm == 2">投票调查</span>
            <span v-if="detailInfo.pjkh_khxm == 3">问卷评价</span>
          </div>
        </div>
        <div class="mt15 d-flex">
          <div class="font-size-16">考核组成员：</div>
          <div class="flex-1 font-size-16">{{detailInfo.pjkh_khzcy}}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {pjkh_list, pjkh_add, pjkh_edit, pjkh_del,pjkh_detail,org_users} from "./api";
import Tinymce from "@/components/TinymceVue/index.vue";
import { useUserStore } from "@/stores/user";
const {real_name, user_id,dept_ids} = useUserStore();
export default {
  name: "index",
  components: {
    Tinymce
  },
  data() {
    return {
      keyword: '',
      type_value: '',
      loading: false,
      multipleSelection: [],
      type_list: [{
        label: '全部',
        value: '0'
      }, {
        label: '计划1',
        value: '1'
      }, {
        label: '计划2',
        value: '2'
      }, {
        label: '计划3',
        value: '3'
      }],
      activeName: 'first',
      createTable: [],
      auditTable: [],
      limit: 10,
      total: 0,
      cur_page: 1,
      title: '',
      dialogFormVisible: false,
      dialogForm: {
        pjkh_id: '',
        pjkh_title: '',
        pjkh_content: '',
        pjkh_khlx: '',
        pjkh_cjsj: '',
        pjkh_cpkssj: '',
        pjkh_cpjssj: '',
        pjkh_ytjfs: '',
        pjkh_khxm: '',
        pjkh_khzcy: [],
        pjkh_bkhcy: []
      },
      xmList: [{
        label: '打分测评',
        value: '1'
      }, {
        label: '投票调查',
        value: '2'
      }, {
        label: '问卷评价',
        value: '3'
      }],
      cyList: [
        {
          label: '周静',
          value: '1'
        }, {
          label: '王源',
          value: '2'
        }, {
          label: '李昊',
          value: '3'
        }, {
          label: '王刚',
          value: '4'
        }],
      isEdit: false,
      timestamp: Date.now(),
      dialogDetailVisible:false,
      detailInfo:{},
      userList:[]
    }
  },
  methods: {
    getUserList() {
      let data = {
        dept_id: dept_ids[0],
        page: 1,
        limit: 9999
      }
      org_users(data).then(res => {
        if (res.code == 1) {
          this.userList = res.data.page_data;
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = [];
      for (let i in val) {
        this.multipleSelection.push(val[i].pjkh_id)
      }
    },
    getListData() {
      this.loading = true;
      let data = {
        page: this.cur_page,
        limit: this.limit,
        keyword: this.keyword,
      };
      pjkh_list(data).then((res) => {
        this.loading = false;
        this.createTable = res.data.page_data;
        this.auditTable = res.data.page_data;
        this.cur_page = Number(res.data.page_now);
        this.total = Number(res.data.total_rows);
      });
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },
    createNew() {
      this.isEdit = false;
      this.title = '新建考核';
      this.dialogForm = {
        pjkh_title: '',
        pjkh_content: '',
        pjkh_khlx: '',
        pjkh_cjsj: '',
        pjkh_cpkssj: '',
        pjkh_cpjssj: '',
        pjkh_ytjfs: '',
        pjkh_khxm:'',
        pjkh_khzcy:'',
        pjkh_bkhcy:''
      }
      this.dialogFormVisible = true;
    },
    editData(item) {
      this.isEdit = true;
      this.title = '编辑考核';
      this.dialogForm = {
        pjkh_id: item.pjkh_id,
        pjkh_title: item.pjkh_title,
        pjkh_content: item.pjkh_content,
        pjkh_khlx: item.pjkh_khlx,
        pjkh_cjsj: item.pjkh_cjsj,
        pjkh_cpkssj: item.pjkh_cpkssj,
        pjkh_cpjssj: item.pjkh_cpjssj,
        pjkh_ytjfs: item.pjkh_ytjfs,
        pjkh_khxm:item.pjkh_khxm,
        pjkh_khzcy:item.pjkh_khzcy.split(','),
        pjkh_bkhcy: item.pjkh_bkhcy.split(',')
      };
      this.timestamp = Date.now();
      this.dialogFormVisible = true;
    },
    formSubmit() {
      let data = {
        pjkh_title: this.dialogForm.pjkh_title,
        pjkh_content: this.dialogForm.pjkh_content,
        pjkh_khlx: this.dialogForm.pjkh_khlx,
        pjkh_cjsj: this.dialogForm.pjkh_cjsj,
        pjkh_cpkssj: this.dialogForm.pjkh_cpkssj,
        pjkh_cpjssj: this.dialogForm.pjkh_cpjssj,
        pjkh_ytjfs: this.dialogForm.pjkh_ytjfs,
        pjkh_khxm:this.dialogForm.pjkh_khxm,
        pjkh_khzcy:this.dialogForm.pjkh_khzcy,
        pjkh_bkhcy:this.dialogForm.pjkh_bkhcy
      }
      if (!this.isEdit) {
        pjkh_add(data).then(res => {
          if (res.code == 1) {
            this.$message({
              message: "考核新建成功！",
              type: "success",
            });
            this.dialogFormVisible = false;
            this.getListData();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        })
      } else {
        data.pjkh_id = this.dialogForm.pjkh_id;
        pjkh_edit(data).then(res => {
          if (res.code == 1) {
            this.$message({
              message: "考核编辑成功！",
              type: "success",
            });
            this.dialogFormVisible = false;
            this.getListData();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        })
      }

    },
    delData(item) {
      this.$confirm('确定要删除该考核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          pjkh_id: item.pjkh_id
        }
        pjkh_del(data).then(res => {
          if (res.code == 1) {
            this.$message({
              message: "考核删除成功！",
              type: "success",
            });
            this.getListData();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        })
      }).catch(() => {
      });
    },
    batchDel() {
      this.$confirm('确定要删除这些考核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          pjkh_id: this.multipleSelection
        }
        pjkh_del(data).then(res => {
          if (res.code == 1) {
            this.$message({
              message: "考核批量删除成功！",
              type: "success",
            });
            this.getListData();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        })
      }).catch(() => {
      });
    },
    publishData(item) {
      let data = {
        pjkh_zt: 2,
        pjkh_id: item.pjkh_id,
      };
      pjkh_edit(data).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: "发布成功！",
            type: "success",
          });
          this.getListData();
        }
      });
    },
    detailData(item) {
      this.dialogDetailVisible = true;
      let data = {
        pjkh_id: item.pjkh_id,
      };
      pjkh_detail(data).then((res) => {
        if (res.code == 1) {
          this.detailInfo = res.data.one_info;
        }
      });
    },
  },
  mounted() {
    this.getUserList();
    this.getListData();
  }
}
</script>
<style scoped lang="scss">
.pop-content {
  width: 100%;
  max-height: 700px;
  overflow-y: auto;
}
</style>
