<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/contract' }"
            >合同管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>合同详情</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <div class="main-container">
      <el-card class="box-card" shadow="always">
        <div slot="header" class="clearfix">
          <h3>一、合同基本信息</h3>
        </div>
        <el-form
          :inline="true"
          size="small"
          label-width="120px"
          label-position="right"
          :disabled="readonly"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item label="合同名称">
            <el-input
              v-model="formInline.htmc"
              placeholder="合同名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input v-model="formInline.ks" placeholder="项目名称"></el-input>
          </el-form-item>
          <el-form-item label="项目编号">
            <el-input
              v-model="formInline.ttmc"
              placeholder="项目编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="合同总金额(万元)">
            <el-input
              v-model="formInline.sl"
              placeholder="合同总金额(万元)"
            ></el-input>
          </el-form-item>
          <el-form-item label="交接日期">
            <el-input v-model="formInline.dw" placeholder="交接日期"></el-input>
          </el-form-item>
          <el-form-item label="验收日期">
            <el-date-picker type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="交接人" label-width="85px">
            <el-input v-model="formInline.dw" placeholder="交接人"></el-input>
          </el-form-item>
          <el-form-item label="乙方公司">
            <el-input placeholder="人福医疗"></el-input>
          </el-form-item>
          <el-form-item label="乙方联系人">
            <el-input placeholder="王丽"></el-input>
          </el-form-item>
          <el-form-item label="乙方联系方式">
            <el-input placeholder="17777777777"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card" shadow="always">
        <div slot="header" class="clearfix">
          <h3>二、合同标的</h3>
          <div class="bd-btns">
            <el-button
              type="primary"
              :disabled="readonly"
              size="small"
              icon="el-icon-plus"
              @click="onAddDevice"
              >新增</el-button
            >
          </div>
          <el-table
            ref="multipleTable"
            border
            fit
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :summary-method="getSummaries"
            show-summary
            @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 label="设备名称" width="200">
              <template slot-scope="scope">
                <el-input
                  :disabled="readonly"
                  v-model="scope.row.name"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="科室">
              <template slot-scope="scope">
                <el-input
                  :disabled="readonly"
                  v-model="scope.row.ks"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="型号" width="200">
              <template slot-scope="scope">
                <el-input
                  :disabled="readonly"
                  v-model="scope.row.xh"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="生产厂家" width="200">
              <template slot-scope="scope">
                <el-input
                  :disabled="readonly"
                  v-model="scope.row.sccj"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="数量">
              <template slot-scope="scope">
                <el-input
                  :disabled="readonly"
                  v-model="scope.row.sl"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="单价(万元)">
              <template slot-scope="scope">
                <el-input
                  :disabled="readonly"
                  v-model="scope.row.dj"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="总价(万元)">
              <template slot-scope="scope">
                <el-input
                  :disabled="readonly"
                  v-model="scope.row.zj"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="备注" width="180">
              <template slot-scope="scope">
                <el-input
                  type="textarea"
                  :disabled="readonly"
                  v-model="scope.row.bz"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  :disabled="readonly"
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-card class="box-card" shadow="always">
        <div slot="header" class="clearfix">
          <h3>三、合同进展</h3>
        </div>
        <el-collapse v-model="activeNames">
          <el-collapse-item title="合同签订" name="3">
            <template slot="title">
              <h3>合同签订</h3>
              <i class="header-icon el-icon-info"></i>
            </template>
            <el-timeline-item
              v-for="(item, index) in htqd"
              :key="timestamps3[index]"
              :timestamp="timestamps3[index]"
              placement="top"
            >
              <el-card>
                <el-form
                  :inline="true"
                  size="small"
                  :disabled="readonly"
                  :model="item"
                  class="demo-form-inline"
                >
                  <el-form-item label="经办人">
                    <el-input
                      v-model="item.name"
                      placeholder="经办人"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="进展">
                    <el-select v-model="item.process" placeholder="进展">
                      <el-option label="未开始" value="01"></el-option>
                      <el-option label="进行中" value="02"></el-option>
                      <el-option label="已完成" value="03"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="开始时间">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="item.startDate"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束时间">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="item.endDate"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="备注">
                    <el-input type="textarea" v-model="item.remark"></el-input>
                  </el-form-item>
                </el-form>
              </el-card>
            </el-timeline-item>
          </el-collapse-item>
          <el-collapse-item title="设备验收" name="4">
            <template slot="title">
              <h3>设备验收</h3>
              <i class="header-icon el-icon-info"></i>
            </template>
            <el-form
              :inline="true"
              size="small"
              :disabled="readonly"
              :model="sbys"
              class="demo-form-inline"
            >
              <el-form-item label="状态">
                <el-select v-model="sbys.zt" placeholder="采购状态">
                  <el-option label="未开始" value="01"></el-option>
                  <el-option label="进行中" value="02"></el-option>
                  <el-option label="已完成" value="03"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="验收人">
                <el-input v-model="sbys.name" placeholder="验收人"></el-input>
              </el-form-item>
              <el-form-item label="验收日期">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="sbys.date"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="档案号">
                <el-input v-model="sbys.dah" placeholder="档案号"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="sbys.bz"></el-input>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="付款" name="5">
            <template slot="title">
              <h3>付款</h3>
              <i class="header-icon el-icon-info"></i>
            </template>
            <el-form
              :inline="true"
              size="small"
              :disabled="readonly"
              :model="fk"
              class="demo-form-inline"
            >
              <el-form-item label="状态">
                <el-select v-model="fk.zt" placeholder="采购状态">
                  <el-option label="未开始" value="01"></el-option>
                  <el-option label="进行中" value="02"></el-option>
                  <el-option label="已完成" value="03"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="付款批次">
                <el-input v-model="fk.fkpc" placeholder="付款批次"></el-input>
              </el-form-item>
              <el-form-item label="金额">
                <el-input v-model="fk.je" placeholder="金额"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="fk.bz"></el-input>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="质保金" name="6">
            <template slot="title">
              <h3>质保金</h3>
              <i class="header-icon el-icon-info"></i>
            </template>
            <el-form
              :inline="true"
              size="small"
              :disabled="readonly"
              :model="zbj"
              class="demo-form-inline"
            >
              <el-form-item label="状态">
                <el-select v-model="zbj.zt" placeholder="状态">
                  <el-option label="未开始" value="01"></el-option>
                  <el-option label="进行中" value="02"></el-option>
                  <el-option label="已完成" value="03"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="质保金到期日期">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="zbj.date"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="经办人">
                <el-input v-model="zbj.name" placeholder="经办人"></el-input>
              </el-form-item>
              <el-form-item label="付款金额">
                <el-input v-model="zbj.je" placeholder="付款金额"></el-input>
              </el-form-item>

              <el-form-item label="付款批次">
                <el-input v-model="zbj.fkpc" placeholder="付款批次"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="zbj.bz"></el-input>
              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
    <div class="operation-box">
      <el-button type="primary" v-if="readonly" @click="edit">编辑</el-button>
      <el-button type="primary" v-else @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="back">返回上页</el-button>
    </div>
  </div>
</template>

<script>
import cddata from "../../data/contactDataDetail";
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      readonly: true,
      htqd: cddata.htqd,
      timestamps1: [
        "组织需求形式审查 2018/4/12 20:46",
        "业务行政会议审议 2018/4/3",
        "组织采购意向公示 2018/4/2",
        "组织技术参数论证 2018/4/2",
        "技术参数复核 2018/4/2",
        "采购需求编报 2018/4/2",
        "质疑答复流标复核 2018/4/2",
      ],
      timestamps3: [
        "采购交接 2018/4/12 20:46",
        "医工科审核 2018/4/3",
        "需求科室 2018/4/2",
        "财务审核 2018/4/2",
        "审核监管科审核 2018/4/2",
        "法务 2018/4/2",
        "印章申请 2018/4/2",
        "合同签订 2018/4/2",
      ],
      cg: cddata.cg,
      sbys: cddata.sbys, //设备验收
      fk: cddata.fk, //付款
      zbj: cddata.zbj, //质保金
      activeNames: ["3", "4", "5", "6"],
      tableData: [
        {
          name: "便携支气管镜",
          ks: "神经外科",
          xh: "inslight iS3",
          sccj: "深圳因赛斯医疗科技有限公司",
          sl: "1",
          dj: "7.85",
          zj: "7.85",
          bz: "2022年度计划",
        },
      ],
      multipleSelection: [],
    };
  },
  methods: {
    //汇总设备总价
    getSummaries(){
        const sums = [];
        sums[7] = '总价(万元)';
        var price = 0
        this.tableData.forEach((item) => {
          price +=  parseFloat(item.zj)
         });
        sums[8] = price;
        return sums;
    },
    //删除设备
    handleDelete(index) {
      this.tableData.splice(index, 1);
      console.log(this.tableData);
    },
    //新增设备
    onAddDevice() {
      var obj = {
        name: "",
        ks: "",
        xh: "",
        sccj: "",
        sl: "",
        dj: "0",
        zj: "0",
        bz: "",
      };
      this.tableData.push(obj);
    },
    onSubmit() {
      console.log("submit!");
    },
    edit() {
      this.readonly = false;
    },
    save() {
      this.$confirm("是否保存?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "保存成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消保存",
          });
        });
    },
    cancel() {
      this.$confirm("是否取消编辑?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.readonly = true;
        })
        .catch(() => {});
    },
    back() {
      this.$router.push("/device");
    },
    step(num) {
      this.activeNames = num;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  mounted() {
    console.log(this.$route.query.id);
    if (this.$route.query.id) {
      //查询页面，查询表单信息
    } else {
      //新增页面，页面可编辑
      this.readonly = false;
    }
  },
};
</script>

<style>
.main-container {
  width: calc(100% - 48px);
  height: calc(100vh - 160px);
  margin: 12px 12px 0 24px;
  background-color: rgb(236, 233, 233);
  overflow: auto;
}

.operation-box {
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: rgba(141, 139, 139, 0.348);
  width: calc(100% - 48px);
  padding: 8px 0;
  margin: 0 24px;
}

.box-card {
  margin-top: 8px;
}

.bd-btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
}

.demo-form-inline {
  margin: 0 24px;
}
</style>