<template>
  <div>
    <div class="d-flex flex-between">
      <div></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, index) in state_list"
              :key="index"
              :label="item"
              :value="item"
            >
            </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
          v-loading="loading"
          :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="采购的主要理由及依据"
            width="200"
            prop="xm_lyyj"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="采购类型"
            prop="lb_name"
          ></el-table-column>
          <el-table-column
            label="采购金额(元)"
            width="120"
            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_fp_user == 0">未分配</span>
              <span v-else>已分配</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="right">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.xm_fp_user == 0 && scope.row.create_user_id==user_id"
                type="text"
                @click="allocation(scope.row)"
                >任务分配
              </el-button>
              <el-button type="text" @click="detailData(scope.row)"
                >详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="我的采购" name="second">
        <el-table
          v-loading="loading"
          :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="120"
            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_is_wc == 2">未完成</span>
              <span v-if="scope.row.xm_is_wc == 1">已完成</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="right">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.xm_is_wc == 2"
                type="text"
                @click="finish(scope.row)"
                >完成
              </el-button>
              <el-button 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="10"
        :total="total"
        :current-page.sync="cur_page"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </footer>
    <!-- 任务分配弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="581px">
      <el-form :model="dialogForm" label-width="120px">
        <el-form-item label="请选择分配人员">
          <el-select filterable v-model="dialogForm.staff" placeholder="请选择分配人员">
            <el-option
              v-for="s in userList"
              :label="s.user_realname"
              :key="s.user_id"
              :value="s.user_id"
            />
          </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="detailVisible" width="680px">
      <div id="imageWrapper">
        <p class="title">
        申报日期: {{ detailMsg.create_dateline }} 审核通过日期:{{
         finishTime
        }}
      </p>
      <h3>教育局采购项目申报表</h3>
      <table
        cellspacing="0"
        align="center"
        valign="middle"
      >
        <tr>
          <td>申报科室</td>
          <td>{{ detailMsg.department_name }}</td>
          <td>申请人</td>
          <td>{{ detailMsg.xm_user_name }}</td>
        </tr>
        <tr>
          <td>项目名称</td>
          <td colspan="3">{{ detailMsg.xm_name }}</td>
        </tr>
        <tr style="height: 50px">
          <td>采购的主要理由及依据</td>
          <td colspan="3">{{ detailMsg.xm_lyyj }}</td>
        </tr>
        <tr>
          <td>采购类型</td>
          <td>{{ detailMsg.lb_name }}</td>
          <td>采购金额</td>
          <td>{{ detailMsg.xm_price }}元</td>
        </tr>
        <tr style="height: 80px">
          <td>项目清单</td>
          <td colspan="3"><div v-html="detailMsg.xm_qd"></div></td>
        </tr>
        <tr v-for="sp in detailMsg.shjl" :key="sp.sh_id" style="height: 50px">
          <td>
            <div>
              {{ sp.sh_dept_name }}
            </div>
            <div>{{ sp.position }}审批</div>
          </td>
          <td colspan="3">
            同意&emsp;&emsp;{{ sp.sh_user_name }}&emsp;&emsp;
            {{ sp.modify_dateline.split(" ")[0] }}
          </td>
        </tr>
      </table>
      <img class="pa t-40 r-40" src="@/assets/images/officialSeal.png" alt="" />
      <p v-if="detailMsg.xm_fp_user == 0">任务分配: 未分配</p>
      <div class="flex" v-else>
        <span class="mr10">任务分配: 已分配</span>
        <div class="mr10">
          <span>{{ detailMsg.xm_fp_user_name }}</span>
        </div>
        {{ detailMsg.xm_is_wc_option_k === "2" ? "未完成" : "已完成" }}
      </div>
      </div>
      <div class="button">
        <el-button type="success" size="small" @click="toImage">导出PDF</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { useUserStore } from "@/stores/user";
import html2canvas from 'html2canvas'
import { request } from "@/utils/request";
const {user_id } = useUserStore();
import Tinymce from "@/components/TinymceVue/index.vue";
import FileUpload from "@/components/FileUpload/index.vue";
import {
  org_users,
  cgxmk_add,
  cgxmk_list,
  cgxmk_edit,
  cgxmk_del,
  cgxmk_detail,
  cgxmk_pdf
} from "./api";

export default {
  name: "index",
  components: {
    Tinymce,
    FileUpload,
  },
  data() {
    return {
      user_id:user_id,
      state_value: "",
      state_list: [
      ],
      loading: false,
      keyword: "",
      title: "",
      activeName: "first",
      staff: "",
      applyTable: [],
      detailMsg: {},
      limit: 10,
      total: 0,
      cur_page: 1,
      dialogFormVisible: false,
      detailVisible: false,
      dialogForm: {
        kylx_id: "",
        title: "",
        content: "",
        time: "",
        lb: "",
        files: "",
        staff: "",
      },
      xm_id: "",
      fp_name: "",
      isEdit: false,
      timestamp: Date.now(),
      userList: [],
      detailMsg: {},
      shjd: [],
      finishTime: '',
      imgUrl: '',
      imgSrc: "",
      https: window.globalVariables.api,
    };
  },
  methods: {
    getUserList() {
      let data = {
        // dept_id: e,
        page: 1,
        site: "jnmf",
        limit: 9999,
        all: 1,
      };
      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.xm_fp_user = 1;
        this.getcgxmList();
      } else {
        this.xm_fp_user = "";
        this.getcgxmList();
      }
    },
    getcgxmList() {
      this.loading = true;
      let data = {
        page: 1,
        limit:this.limit,
        site: "jnmf",
        // lc_status: "5",
        xm_status: "5",
        xm_user_name: this.state_value,
        xm_fp_user: this.xm_fp_user,
      };
      cgxmk_list(data).then((res) => {
        if (res.code == 1) {
          this.applyTable = res.data.page_data;
          this.state_list = [];
          res.data.page_data.forEach((item) => {
            this.state_list.push(item.xm_user_name);
          });
          this.state_list = this.state_list.filter((el, index, self) => {
            return self.indexOf(el) == index;
          });
          this.cur_page = Number(res.data.page_now);
          this.total = Number(res.data.total_rows);
          // console.log(this.state_list);
          this.loading = false;
        }
      });
    },
    getListData() {
      this.loading = true;
      let data = {
        page: this.cur_page,
        limit: this.limit,
        site: "jnmf",
        keyword: this.keyword,
        xm_status: "5",
        xm_user_name: this.state_value,
        xm_fp_user: this.xm_fp_user,
      };
      cgxmk_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);
        this.loading = false;
      });
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },
    allocation(item) {
      this.xm_id = item.xm_id;
      this.title = "任务分配";
      this.getUserList();
      this.dialogFormVisible = true;
    },
    formSubmit() {
      let flag = false;
      if (this.dialogForm.staff) {
        flag = true;
      }
      let data = {
        site: "jnmf",
        issubmit: 1,
        xm_id: this.xm_id,
        jdbg_sbcg_cgxm: {
          xm_fp_user: this.dialogForm.staff,
        },
      };
      if (!flag) {
        return false;
      } else {
        cgxmk_edit(data).then((res) => {
          if (res.code == 1) {
            this.$message({
              message: "分配人员成功！",
              type: "success",
            });
            this.getListData();
            this.dialogFormVisible = false;
          }
        });
      }
    },
    detailData(item) {
      this.detailVisible = true;
      let data = {
        xm_id: item.xm_id,
      };
      cgxmk_detail(data).then((res) => {
        if (res.code == 1) {
          this.detailMsg = res.data.one_info;
          this.shjd = res.data.one_info.shjl;
          this.finishTime = this.shjd[this.shjd.length-1].modify_dateline
          // let t =
          // this.getUserList();
        }
      });
    },
    finish(item) {
      let data = {
        site: "jnmf",
        issubmit: 1,
        xm_id: item.xm_id,
        jdbg_sbcg_cgxm: {
          xm_is_wc: "1",
        },
      };
      cgxmk_edit(data).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: "完成！",
            type: "success",
          });
          this.getcgxmList();
        }
      });
    },
    base64toFile(data, fileName) {
      let dataArr = data.split(",");
      const byteString = atob(dataArr[1]);
      const options = {
        type: "image/jpeg",
        endings: "native"
      };
      const u8Arr = new Uint8Array(byteString.length);
      for (let i = 0; i < byteString.length; i++) {
         u8Arr[i] = byteString.charCodeAt(i);
      }
      return new File([u8Arr], fileName + ".jpg", options);
    },
    toImage() {
      html2canvas(document.querySelector("#imageWrapper"),{
        allowTaint: true,useCORS:true,width:680,height:800,
        }).then(canvas => {
          //document.body.appendChild(canvas);
          //console.info(canvas.toDataURL('image/png'));
          // var img = document.getElementById("test");
          // img.src = canvas.toDataURL('image/png');
          var a = canvas.toDataURL('image/jpeg');
          this.imgSrc=a
          let str = this.base64toFile(a, 'file')
          console.log(str);
          let formData = new FormData();
          formData.append("file", str);
          let that = this;

          request({
            url: "/jdbg/sbcg_cgxm/export_pdf",
            data: formData,
            timeout: 1000 * 60,
          })
            .then(res => {
            if (res.code == '1') {
              window.open(res.data.file_url, "_blank");
            }
          })
      });
    }
  },
  mounted() {
    // this.add();
    this.getcgxmList();
    // this.getListData();
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.title {
  width: 100%;
  font-size: 12px;
}
h3 {
  text-align: center;
  font-weight: 550;
  height: 40px;
  line-height: 40px;
}
table {
  width: 90%;
  tr {
    height: 50px;
    text-align: center;
    border: 1px solid #000;
    td{
      min-width: 120px;
      border: 1px solid #000;
    }
    td:first-of-type {
      width: 150px;
    }
  }
}
.t-40 {
  bottom: 40px;
}
.r-40 {
  right: 60px;
}
</style>
