<template>
  <div>
    <div class="d-flex flex-between">
      <div>
        <el-button type="success" 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>
      </div>
      <el-form label-width="100px" :inline="true">
        <el-form-item prop="state_value">
          <el-select
            class="mr10"
            clearable
            v-model="state_value"
            placeholder="全部"
            @change="getListData"
          >
            <el-option
              v-for="item in state_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="keyword">
          <el-input
            placeholder="搜索项目名称"
            v-model="keyword"
            clearable
            @clear="getListData"
          >
          </el-input>
        </el-form-item>
        <el-button type="primary" class="ml5" @click="getListData"
          >搜索
        </el-button>
      </el-form>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="我申请的" name="first">
        <el-table
          :data="applyTable"
          tooltip-effect="dark"
          v-loading="loading"
          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="department_name"
          >
          </el-table-column>
          <el-table-column label="申请人" prop="xm_user_name"></el-table-column>
          <el-table-column
            label="项目名称"
            show-overflow-tooltip
            prop="xm_name"
          ></el-table-column>
          <el-table-column
            label="采购的主要理由及依据"
            show-overflow-tooltip
            width="200"
            prop="xm_lyyj"
          ></el-table-column>
          <el-table-column label="采购类型" prop="lb_name"></el-table-column>
          <el-table-column
            label="采购金额(元)"
            width="130"
            prop="xm_price"
          ></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.xm_status == 1">未提交</span>
              <span v-if="scope.row.xm_status == 2">待审核</span>
              <span v-if="scope.row.xm_status == 3">审核中</span>
              <span v-if="scope.row.xm_status == 5">已通过</span>
              <span style="color: red" v-if="scope.row.xm_status == 4"
                >已退回</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="right">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.xm_status == 5"
                type="text"
                @click="detailData(scope.row)"
                >详情
              </el-button>
              <el-popover v-else placement="right-start" width="200px" trigger="click">
                <i
                  style="transform: rotate(90deg); cursor: pointer"
                  slot="reference"
                  class="el-icon-more"
                ></i>
                <el-button type="text" @click="detailData(scope.row)"
                  >详情
                </el-button>
                <el-button
                  v-if="scope.row.xm_status == 1 || scope.row.xm_status == 4"
                  type="text"
                  @click="editData(scope.row)"
                  >编辑
                </el-button>
                <el-button
                  v-if="scope.row.xm_status == 1"
                  type="text"
                  @click="auditSubmit(scope.row)"
                >
                  提交审核
                </el-button>
                <el-button
                  v-if="scope.row.xm_status == 4"
                  type="text"
                  @click="auditSubmit(scope.row)"
                  >重新提交
                </el-button>
                <el-button
                  v-if="scope.row.xm_status == 3"
                  type="text"
                  @click="auditBar(scope.row)"
                  >审核进度
                </el-button>
                <el-button
                  v-if="scope.row.xm_status != 5"
                  type="text"
                  @click="deleteData(scope.row)"
                  >删除
                </el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <!-- <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-tab-pane>
      <el-tab-pane label="我审核的" name="second">
        <el-table :data="applyTable" 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="department_name"
          >
          </el-table-column>
          <el-table-column label="申请人" prop="xm_user_name"></el-table-column>
          <el-table-column
            label="项目名称"
            show-overflow-tooltip
            prop="xm_name"
          ></el-table-column>
          <el-table-column
            label="采购的主要理由及依据"
            show-overflow-tooltip
            width="200"
            prop="xm_lyyj"
          ></el-table-column>
          <el-table-column label="采购类型" prop="lb_name"></el-table-column>
          <el-table-column
            label="采购金额(元)"
            width="130"
            prop="xm_price"
          ></el-table-column>
          <el-table-column
            label="申报日期"
            show-overflow-tooltip
            prop="create_dateline"
          ></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.xm_status == 1">未提交</span>
              <span v-if="scope.row.xm_status == 2 && scope.row.is_check === 0"
                >待审核</span
              >
              <span v-if="scope.row.xm_status == 3 && scope.row.is_check === 0"
                >待审核</span
              >
              <span v-if="scope.row.xm_status == 3 && scope.row.is_check === 1"
                >审核中</span
              >
              <span v-if="scope.row.xm_status == 5">已通过</span>
              <span class="color-13" v-if="scope.row.xm_status == 4"
                >已退回</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" align="right">
            <template slot-scope="scope">
              <el-popover
                v-if="
                  scope.row.is_check === 0 &&
                  scope.row.xm_status != 5 &&
                  scope.row.xm_status != 4
                "
                placement="right-start"
                width="150px"
                trigger="click"
              >
                <i
                  style="transform: rotate(90deg); cursor: pointer"
                  slot="reference"
                  class="el-icon-more"
                ></i>
                <el-button type="text" @click="detailData(scope.row)"
                  >详情
                </el-button>
                <el-button
                  v-if="
                    (scope.row.xm_status == 3 && scope.row.is_check == 0) ||
                    scope.row.xm_status == 2
                  "
                  type="text"
                  @click="audit(scope.row)"
                  >审核
                </el-button>
              </el-popover>
              <el-button v-else type="text" @click="detailData(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="700px">
      <el-form
        :model="dialogForm"
        :rules="rules"
        :ref="dialogForm"
        label-width="100px"
      >
        <el-form-item label="申请科室" prop="dept_id">
          <el-select
            style="width: 100%"
            v-model="dialogForm.dept_id"
            @change="ksChange"
            placeholder="请选择科室"
          >
            <el-option
              v-for="item in ksList"
              :key="item.uo_id"
              :label="item.uo_name"
              :value="item.uo_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批流程" prop="flow">
          <el-select
            :disabled="isChoose"
            v-loading="isflow"
            style="width: 100%"
            v-model="dialogForm.flow"
            placeholder="请选择审批流程"
          >
            <el-option
              v-for="item in flowList"
              :key="item.lc_id"
              :label="item.lc_name"
              :value="item.lc_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请人" prop="xm_user_name">
          <el-input
            v-model="dialogForm.xm_user_name"
            placeholder="请输入申请人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目名称" prop="xm_name">
          <el-input
            v-model="dialogForm.xm_name"
            placeholder="请输入项目名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="采购的主要理由及依据" prop="xm_lyyj">
          <el-input
            type="textarea"
            v-model="dialogForm.xm_lyyj"
            placeholder="请输入理由及依据"
          ></el-input>
        </el-form-item>
        <el-form-item label="采购类型" prop="lb_id">
          <el-select
            style="width: 100%"
            v-model="dialogForm.lb_id"
            placeholder="请选择类型"
          >
            <el-option
              v-for="item in lbList"
              :key="item.lb_id"
              :label="item.lb_name"
              :value="item.lb_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购金额" prop="xm_price">
          <el-input
            v-model="dialogForm.xm_price"
            placeholder="请输入采购金额"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目清单" prop="xm_qd">
          <Tinymce
            :key="timestamp"
            v-if="dialogFormVisible"
            v-model="dialogForm.xm_qd"
            :height="300"
          ></Tinymce>
          <p class="text-xs italic">优先考虑输入文字,上传文件仅支持上传图片</p>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="formSubmit(dialogForm)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="审核进度" :visible.sync="auditBarVisible" width="1000px">
      <el-table :data="shjd" style="width: 100%; min-height: 700px">
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column prop="sh_dept_name" label="审核部门" width="150" />
        <el-table-column prop="sh_user_name" label="审核人" width="120" />
        <el-table-column prop="modify_dateline" label="审核时间" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.modify_dateline != 0">{{
              scope.row.modify_dateline
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="scope" label="操作" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.sh_status == 1">待处理</span>
            <span v-if="scope.row.sh_status == 2">通过</span>
            <span v-if="scope.row.sh_status == 3">未通过</span>
          </template>
        </el-table-column>
        <el-table-column prop="sh_reason" label="处理意见" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.sh_status != 1">
              <span v-if="scope.row.xm_status != 1">
                <span v-if="scope.row.sh_reason == ''">无</span>
                <span v-else>{{ scope.row.sh_reason }}</span>
              </span>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="审核" :visible.sync="auditVisible" width="581px">
      <el-form :model="dialogForm" label-width="70px">
        <el-form-item prop="isPass">
          <el-radio-group v-model="dialogForm.isPass">
            <el-radio label="不通过" />
            <el-radio label="通过" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="处理意见" prop="clyj">
          <el-input type="textarea" v-model="dialogForm.clyj"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="auditVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { useUserStore } from "@/stores/user";

const { real_name, dept_ids } = useUserStore();
import Tinymce from "@/components/TinymceVue/index.vue";
import FileUpload from "@/components/FileUpload/index.vue";
import {
  org_users,
  cgxm_list,
  cgxm_add,
  cgxm_edit,
  cgxm_del,
  sblx_list,
  org_list,
  cgxm_audit,
  cgxm_detail,
  lcgl_list,
} from "./api";

export default {
  name: "index",
  components: {
    Tinymce,
    FileUpload,
  },
  data() {
    return {
      state_value: "",
      loading: false,
      state_list: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "未提交",
          value: "1",
        },
        {
          label: "待审核",
          value: "2",
        },
        {
          label: "审核中",
          value: "3",
        },
        {
          label: "已退回",
          value: "4",
        },
        {
          label: "已通过",
          value: "5",
        },
      ],
      keyword: "",
      title: "",
      activeName: "first",
      chcy: [],
      shjd: [],
      applyTable: [],
      auditTable: [],
      limit: 10,
      total: 0,
      cur_page: 1,
      dialogFormVisible: false,
      auditBarVisible: false,
      auditVisible: false,
      lbList: [],
      ksList: [],
      send: true,
      code: false,
      isChoose: false,
      isflow: false,
      dialogForm: {
        dept_id: "",
        lb_id: "",
        lb_name: "",
        xm_user_name: "",
        xm_name: "",
        xm_lyyj: "",
        type: "",
        xm_price: "",
        xm_qd: "",
        xm_id: "",
        isPass: "",
        clyj: "",
        flow: "",
      },
      isEdit: false,
      timestamp: Date.now(),
      userList: [],
      addMsg: {},
      sh_id: "",
      flowList: [],
      my_check: "",
      rules: {
        dept_id: [
          { required: true, message: "请选择申请科室", trigger: "submit" },
        ],
        flow: [
          { required: true, message: "请选择审批流程", trigger: "submit" },
        ],
        xm_user_name: [
          { required: true, message: "请输入申请人", trigger: "submit" },
        ],
        xm_lyyj: [
          { required: true, message: "请输入理由依据", trigger: "submit" },
        ],
        xm_name: [
          { required: true, message: "请输入项目名称", trigger: "submit" },
        ],
        lb_id: [
          { required: true, message: "请输入设备类型", trigger: "submit" },
        ],
        xm_price: [
          { required: true, message: "请输入采购金额", trigger: "submit" },
        ],
        xm_qd: [
          { required: true, message: "请输入项目清单", trigger: "submit" },
        ],
      },
      my_xm: "1",
    };
  },
  methods: {
    getUserList() {
      let data = {
        dept_id: dept_ids[0],
        page: 1,
        limit: "999",
      };
      org_users(data).then((res) => {
        if (res.code == 1) {
          this.userList = res.data.page_data;
        }
      });
    },
    handleClick(tab, event) {
      if (event.target.id == "tab-second") {
        this.my_check = 1;
        this.my_xm = "";
        this.getListData();
      } else {
        this.my_check = "";
        this.my_xm = "1";
        this.getListData();
      }
    },
    getOrgList() {
      let data = {};
      org_list(data).then((res) => {
        this.ksList = res.data.page_data;
      });
    },
    getsblxList() {
      let data = {
        site: "jnmf",
        lb_status: "1",
      };
      sblx_list(data).then((res) => {
        this.lbList = res.data.page_data;
      });
    },
    ksChange(e) {
      this.isflow = true;
      this.isChoose = true;
      let data = {
        page: 1,
        site: "jnmf",
        limit: 999,
        lc_yydx: e,
        lc_status: "1",
        public: "1",
      };
      lcgl_list(data).then((res) => {
        if (res.code == "1") {
          this.flowList = res.data.page_data;
          this.isChoose = false;
          this.isflow = false;
        }
      });
    },
    getcgxmList() {
      let data = {
        page: "1",
        limit: 999,
        site: "jnmf",
        my_xm: this.my_xm,
        my_check: this.my_check,
      };
      cgxm_list(data).then((res) => {
        this.applyTable = res.data.page_data;
        this.cur_page = Number(res.data.page_now);
        this.total = Number(res.data.total_rows);
      });
    },
    getListData() {
      this.loading = true;
      let data = {
        site: "jnmf",
        page: this.cur_page,
        limit: 10,
        my_check: this.my_check,
        my_xm: this.my_xm,
        keyword: this.keyword,
        xm_status: this.state_value,
      };
      cgxm_list(data).then((res) => {
        this.loading = false;
        this.applyTable = 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.getOrgList();
      this.getsblxList();
      this.isEdit = false;
      this.title = "新建采购项目";
      this.dialogForm = {
        dept_id: "",
        xm_user_name: "",
        xm_name: "",
        xm_lyyj: "",
        lb_id: "",
        lb_name: "",
        type: "",
        xm_price: "",
        xm_qd: "",
        isPass: "",
        flow: "",
      };
      this.dialogFormVisible = true;
    },
    editData(item) {
      this.getOrgList();
      this.getsblxList();
      this.ksChange(item.department_id);
      this.isEdit = true;
      this.title = "编辑会议预定";
      this.dialogForm = {
        dept_id: item.department_id,
        xm_user_name: item.xm_user_name,
        xm_name: item.xm_name,
        xm_lyyj: item.xm_lyyj,
        lb_id: item.lb_id,
        xm_price: item.xm_price,
        xm_qd: item.xm_qd,
        xm_id: item.xm_id,
        flow: item.lc_id,
        isPass: item.isPass === 0 ? "不通过" : "通过",
      };
      this.timestamp = Date.now();
      this.dialogFormVisible = true;
    },
    // 提交审核
    auditSubmit(item) {
      let data = {
        site: "jnmf",
        issubmit: 1,
        xm_id: item.xm_id,
        jdbg_sbcg_cgxm: {
          xm_status: "2",
          department_id: item.department_id,
        },
      };
      cgxm_edit(data).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: "提交审核成功！",
            type: "success",
          });
          this.getListData();
        }
      });
    },
    // 审核
    audit(item) {
      this.auditVisible = true;
      this.sh_id = item.xm_id;
    },
    checkSubmit() {
      if (this.dialogForm.isPass != "") {
        let data = {
          site: "jnmf",
          issubmit: 1,
          sh_id: this.sh_id,
          sh_status: this.dialogForm.isPass == "通过" ? "2" : "3",
          sh_reason: this.dialogForm.clyj,
        };
        cgxm_audit(data).then((res) => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.auditVisible = false;
            this.getListData();
          }
        });
      } else {
        this.$message({
          message: "请选择是否通过!",
          type: "warning",
        });
      }
    },
    auditBar(item) {
      this.auditBarVisible = true;
      let data = {
        site: "jnmf",
        xm_id: item.xm_id,
      };
      cgxm_detail(data).then((res) => {
        if (res.code == 1) {
          this.shjd = res.data.one_info.shjl;
        }
      });
    },
    formSubmit(formName) {
      let dept_name = "";
      this.lbList.forEach((a) => {
        if (a.lb_id == this.dialogForm.lb_id) {
          this.dialogForm.lb_name = a.lb_name;
        }
      });
      this.ksList.forEach((item) => {
        if (item.uo_id == this.dialogForm.dept_id) {
          dept_name = item.uo_name;
        }
      });
      let data = {
        jdbg_sbcg_cgxm: {
          department_id: this.dialogForm.dept_id,
          department_name: dept_name,
          xm_name: this.dialogForm.xm_name,
          xm_user_name: this.dialogForm.xm_user_name,
          lb_id: this.dialogForm.lb_id,
          lb_name: this.dialogForm.lb_name,
          xm_lyyj: this.dialogForm.xm_lyyj,
          xm_price: this.dialogForm.xm_price,
          xm_qd: this.dialogForm.xm_qd,
          xm_status: "1",
          lc_id: this.dialogForm.flow,
          // xm_fp_user: "1",
        },
        // my_check:'1',
      };
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // return console.log(data.jdbg_sbcg_cgxm.xm_qd);
          if (!this.isEdit) {
            cgxm_add(data).then((res) => {
              if (res.code == 1) {
                this.$message({
                  message: "采购项目新建成功！",
                  type: "success",
                });
                this.addMsg = res.data.one_info;
                this.dialogFormVisible = false;
                this.getListData();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            });
          } else {
            Object.assign(data, {
              xm_id: this.dialogForm.xm_id,
              issubmit: 1,
              site: "jnmf",
            });
            cgxm_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",
                });
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    audioSubmit() {
      let data = {
        sh_id,
      };
    },
    detailData(row) {
      this.$router.push({
        name: "sbys_detail",
        params: {
          id: row.xm_id,
        },
      });
    },
    deleteData(item) {
      let data = {
        xm_id: item.xm_id,
      };
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          cgxm_del(data).then((res) => {
            console.log(res);
            this.getListData();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    // this.getOrgList();
    // this.getUserList();
    this.getcgxmList();
    // this.getListData();
  },
};
</script>

<style lang="scss" scoped>
.left {
  width: 100%;
  display: flex;
  position: relative;
  &::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    opacity: 0.5;
    left: 0;
    top: -30px;
  }
  .ewm {
    width: 300px;
    height: 300px;
    padding: 10px;
    box-sizing: border-box;
    img {
      width: 100%;
      box-shadow: 0 0 10px 1px #ccc;
    }
  }
  .des {
    height: 300px;
    line-height: 300px;
    font-size: 14px;
    font-family: Segoe UI, Segoe UI-Regular;
    font-weight: 400;
    color: #265cd4;
  }
}
.right {
  width: 100%;
  .signed {
    color: #265cd4;
  }
}
</style>
