<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>合同管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <div class="container">
      <el-row>
        <el-form
          :inline="true"
          :model="formInline"
          size="small"
          class="demo-form-inline"
        >
          <el-form-item label="合同名称" label-width="100px">
            <el-input
              v-model="formInline.name"
              placeholder="合同名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目编号" label-width="100px">
            <el-input
              v-model="formInline.pnum"
              placeholder="项目编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="合同编号" label-width="100px">
            <el-input
              v-model="formInline.cnum"
              placeholder="项目编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="乙方公司" label-width="100px">
            <el-input
              v-model="formInline.company"
              placeholder="乙方公司"
            ></el-input>
          </el-form-item>
          <el-form-item label="签订日期" label-width="100px">
            <el-date-picker
              v-model="formInline.rangeDate1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="交接日期" label-width="100px">
            <el-date-picker
              v-model="formInline.rangeDate2"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态" label-width="100px">
            <el-select v-model="formInline.status" placeholder="状态">
              <el-option label="科室签字" value="1"></el-option>
              <el-option label="财务审核" value="2"></el-option>
              <el-option label="审核监管科审核" value="3"></el-option>
              <el-option label="公司整改" value="4"></el-option>
              <el-option label="法务审核" value="5"></el-option>
              <el-option label="印章申请" value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button style="margin-left: 64px" type="primary" @click="onAdd"
              >新增</el-button
            >
            <el-button type="primary" @click="onDelete">删除</el-button>
            <el-button type="primary" @click="onBatch">批量操作</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table
        ref="multipleTable"
        fit
        border
        height="400"
        :data="tableData"
        tooltip-effect="dark"
        :show-overflow-tooltip="true"
        style="width: 100%; background-color: none"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column prop="name" label="合同名称" width="200">
        </el-table-column>
        <el-table-column prop="pname" label="项目名称" width="200">
        </el-table-column>
        <el-table-column prop="company" label="乙方" width="120">
        </el-table-column>
        <el-table-column prop="cnum" label="合同编号"> </el-table-column>

        <el-table-column prop="pnum" label="项目编号"> </el-table-column>
        <el-table-column prop="rDate" label="采购交接日期" width="120">
        </el-table-column>
        <el-table-column prop="sdate" label="签订日期" width="120">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope"
            ><a
              style="cursor: pointer"
              @click="handleDetailChange(scope.row)"
              >{{ scope.row.status }}</a
            ></template
          >
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, 200, 400]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import contractDataList from "../../data/contractDataList";

export default {
  data() {
    return {
      formInline: {
        name: "", //合同明好才能
        pnum: "", //项目编号
        cnum: "", //合同编号
        rangeDate1: "", //签订日期
        rangeDate2: "", //交接日期
        status: "", //状态
        company: "", //乙方公司
      },
      tableData: contractDataList,
      currentPage: 1,
      multipleSelection: [],
      checkedCities: [
        "序号",
        "计划年度",
        "采购权限",
        "科室",
        "设备名称",
        "数量",
      ],
      dialogExportVisible: false,
    };
  },
  methods: {
    onSubmit() {
      console.log(this.formInline);
    },
    onAdd() {
      console.log("onAdd");
      this.$router.push({ path: "/contractDetail" });
    },
    onDelete() {
      //确认勾选数据
      if (this.multipleSelection.length == 0) {
        this.$message.error("请勾选的数据！");
        return;
      }
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      console.log("onDelete");
    },
    onExport() {
      //确认勾选数据
      if (this.multipleSelection.length == 0) {
        this.$message.error("请勾选数据！");
        return;
      }
      //弹出对话框
      this.dialogExportVisible = true;
    },
    onBatch() {
      console.log("onBatch");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("handleSelectionChange:", val);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleDetailChange(val) {
      this.$router.push({ path: "/contractDetail", query: { id: val.id } });
    },
  },
};
</script>

<style scoped>
.el-row {
  margin: 10px;
}

a {
  text-decoration: underline;
}

.container {
  width: calc(100% - 48px);
  height: calc(100vh - 160px);
  margin: 12px 12px 0 24px;
}
</style>