<style>
</style>
<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-input
            @change="resetSearch"
            clearable
            standout="bg-primary text-white"
            v-model="msg.OrderId"
            label="订单id"
            @clear="resetSearch"
            maxlength="30"
          />
        </div>
        <div class="col-3">
          <q-select
            @input="resetSearch"
            standout="bg-primary text-white"
            option-value="Id"
            option-label="Name"
            v-model="msg.CType"
            :options="CTypeList"
            emit-value
            map-options
            label="类型"
          />
        </div>
        <div class="col-3">
          <q-select
            @input="resetSearch"
            standout="bg-primary text-white"
            v-model="msg.Status"
            :options="StatusOpts"
            option-value="Id"
            option-label="Name"
            label="状态"
            emit-value
            map-options
          />
        </div>
        <div class="col-3">
          <q-input
            @change="resetSearch"
            clearable
            standout="bg-primary text-white"
            v-model="msg.ContractNo"
            label="合同编号"
            @clear="resetSearch"
            maxlength="30"
          />
        </div>
        <div class="col-3">
          <q-input
            @change="resetSearch"
            clearable
            standout="bg-primary text-white"
            v-model="msg.StudentName"
            label="学生姓名"
            @clear="resetSearch"
            maxlength="30"
          />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table
        :pagination="msg"
        :loading="loading"
        no-data-label="暂无相关数据"
        flat
        class="sticky-column-table"
        separator="none"
        title="合同信息"
        :data="dataList"
        :columns="columns"
        row-key="name"
      >
        <template v-slot:top="props">
          <div class="col-2 q-table__title">合同信息</div>
          <q-space />
          <div class="page-option"></div>
        </template>
        <template v-slot:body-cell-CreateByName="props">
          <q-td :props="props">
            <q-avatar rounded size="sm" v-if="props.row.CreateByPhoto">
              <img :src="props.row.CreateByPhoto" />
            </q-avatar>
            <q-avatar
              rounded
              size="sm"
              color="teal-10"
              text-color="white"
              v-if="!props.row.CreateByPhoto"
            >
              {{ props.value.substring(0, 1) }}</q-avatar
            >
            {{ props.row.CreateByName }}
          </q-td>
        </template>
        <template v-slot:body-cell-StudentName="props">
          <q-td auto-width :props="props">
            <span v-if="props.row.Sign" style="color: #67c23a">【已签字】</span>
            <span v-else style="color: #e95252">【未签字】</span>
            {{ props.row.StudentName }}
          </q-td>
        </template>

        <template v-slot:body-cell-Status="props">
          <q-td auto-width :props="props">
            <span v-if="props.row.Status == 0" style="color: #e6a23c"
              >草稿</span
            >
            <span v-if="props.row.Status == 1" style="color: #409eff"
              >提交审核</span
            >
            <span v-if="props.row.Status == 2" style="color: #67c23a"
              >审合通过</span
            >
            <span v-if="props.row.Status == 3" style="color: #f56c6c"
              >驳回</span
            >
            <span v-if="props.row.Status == 4" style="color: #e95252"
              >取消</span
            >
          </q-td>
        </template>
        <template v-slot:body-cell-IsCompanySeal="props">
          <q-td auto-width :props="props">
            <span v-if="props.row.IsCompanySeal == 0" style="color: #e95252"
              >未盖章</span
            >
            <span v-if="props.row.IsCompanySeal == 1" style="color: #67c23a"
              >已盖章</span
            >
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination
            class="full-width justify-end"
            v-model="msg.pageIndex"
            color="primary"
            :max="pageCount"
            :input="true"
            @input="changePage"
          />
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <div>
              <q-btn
                flat
                size="xs"
                v-if="props.row.Status == 0 || props.row.Status == 3"
                icon="edit"
                color="accent"
                style="font-weight: 400"
                @click="EditContract(props.row)"
                label="编辑"
              />
              <el-tooltip
                content="复制链接发送给客人签字"
                placement="top"
                effect="light"
              >
                <q-btn
                  flat
                  size="xs"
                  v-if="
                    props.row.Status == 2 &&
                    (props.row.Sign == '' || props.row.Sign == null)
                  "
                  icon="iconfont icon-qianming"
                  color="accent"
                  style="font-weight: 400"
                  @click="CopyUrl(props.row)"
                  label="获取合同链接"
                />
              </el-tooltip>
              <q-btn
                flat
                size="xs"
                icon="iconfont icon-View"
                color="accent"
                @click="goContract(props.row)"
                style="font-weight: 400"
                label="查看"
              />
              <q-btn-dropdown
                flat
                size="xs"
                color="dark"
                label="更多"
                style="margin-left: 10px"
                v-if="
                  props.row.Status == 0 ||
                  props.row.Status == 2 ||
                  props.row.Status == 3
                "
              >
                <q-list>
                  <q-item
                    clickable
                    v-close-popup
                    v-if="props.row.Status == 0 || props.row.Status == 3"
                    @click="operationContract(props.row, 1)"
                  >
                    <q-item-section>
                      <q-item-label>提交审核</q-item-label>
                    </q-item-section>
                  </q-item>
                  <!-- <q-item clickable v-close-popup @click="copyContract(props.row)">
                    <q-item-section>
                      <q-item-label>复制合同</q-item-label>
                    </q-item-section>
                  </q-item> -->
                  <q-item
                    clickable
                    v-close-popup
                    v-if="props.row.Status == 2"
                    @click="downloadContract(props.row)"
                  >
                    <q-item-section>
                      <q-item-label>下载</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item
                    clickable
                    v-close-popup
                    v-if="props.row.Status == 0"
                    @click="operationContract(props.row, 4)"
                  >
                    <q-item-section>
                      <q-item-label>取消</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-btn-dropdown>
            </div>
          </q-td>
        </template>
      </q-table>
    </div>
    <eduinfo-form
      v-if="isShowEduForm"
      :seting-obj="eduObj"
      @close="closeEdudia"
      @success="refreshPage"
    >
    </eduinfo-form>
  </div>
</template>
<script>
import {
  GetEducationContractPageCodeList,
  GetMyEducationContractPageList,
  SetEducationContractAudit,
  GetDownLoadEducationContract,
  SetEducationContractCopy,
} from "../../api/sale/contract";

import { downloadLocalFile } from "../../api/common/common";

import eduinfoForm from "../../components/sale/eduinfo-form";
export default {
  meta: {
    title: "合同管理",
  },
  components: {
    eduinfoForm,
  },
  data() {
    return {
      columns: [
        {
          name: "ContractNo",
          label: "合同编号",
          align: "left",
          field: "ContractNo",
        },
        {
          name: "CTypeName",
          label: "类型",
          align: "left",
          field: "CTypeName",
        },
        {
          name: "StudentName",
          label: "学生名称",
          field: "StudentName",
          align: "left",
        },
        //   {
        //     name: 'SchoolName',
        //     label: '学校名称',
        //     align: 'left',
        //     field: 'SchoolName'
        //   },
        {
          name: "CourseName",
          label: "课程名称",
          align: "left",
          field: "CourseName",
        },
        {
          name: "CreateByName",
          label: "创建人",
          align: "left",
          field: "CreateByName",
        },
        {
          name: "CreateTime",
          label: "创建时间",
          align: "left",
          field: "CreateTime",
        },
        {
          name: "SchoolStatusStr",
          label: "学管部审核状态",
          align: "left",
          field: "SchoolStatusStr",
        },
        {
          name: "AdminStatusStr",
          label: "行政审核状态",
          align: "left",
          field: "AdminStatusStr",
        },
        // {
        //   name: 'Status',
        //   label: '合同状态',
        //   align: 'left',
        //   field: 'Status'
        // },
        {
          name: "IsCompanySeal",
          label: "是否盖章",
          align: "left",
          field: "Status",
        },
        {
          name: "optioned",
          label: "操作",
          field: "RoomId",
        },
      ],
      loading: true,
      msg: {
        pageIndex: 1,
        pageSize: 12,
        rowsPerPage: 12,
        OrderId: "", //订单id
        CType: 0, //1培训 2留学
        Status: -1, //0草稿 1提交审核 2审核通过 3驳回 4取消
        ContractNo: "", //合同编号
        StudentName: "", //学生姓名
      },
      pageCount: 0,
      dataList: [],
      //类型下拉
      CTypeList: [
        {
          Id: 0,
          Name: "不限",
        },
        {
          Id: 1,
          Name: "培训",
        },
        {
          Id: 2,
          Name: "留学",
        },
      ],
      //状态下拉
      StatusOpts: [
        {
          Id: -1,
          Name: "不限",
        },
        {
          Id: 0,
          Name: "草稿",
        },
        {
          Id: 1,
          Name: "提交审核",
        },
        {
          Id: 2,
          Name: "审核通过(行政)",
        },
        {
          Id: 5,
          Name: "审核通过(学管)",
        },
        {
          Id: 3,
          Name: "驳回",
        },
        {
          Id: 4,
          Name: "取消",
        },
      ],
      eduObj: null,
      isShowEduForm: false,
    };
  },
  created() {},
  mounted() {
    if (this.$route.query && this.$route.query.Name) {
      //从订单完成统计跳转过来的带的参数
      this.msg.ContractNo = decodeURI(this.$route.query.Name);
    }
    this.getList();
  },
  methods: {
    //获取校区列表
    getList() {
      this.loading = true;
      GetMyEducationContractPageList(this.msg).then((res) => {
        this.loading = false;
        if (res.Code == 1) {
          this.dataList = res.Data.PageData;
          this.pageCount = res.Data.PageCount;
        }
      });
    },
    //重新查询
    resetSearch() {
      this.msg.pageIndex = 1;
      this.getList();
    },

    //分页改变
    changePage(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    //跳转至编辑
    goContract(item) {
      let routeUrl = this.$router.resolve({
        path: "/contractView",
        query: {
          ContractId: item.Id,
        },
      });
      window.open(routeUrl.href, "_blank");
    },
    //新增修改合同
    EditContract(obj) {
      if (obj) {
        this.eduObj = {
          OrderId: obj.OrderId,
          GuestId: obj.GuestId,
          ContractId: obj.Id,
        };
      } else {
        this.eduObj = null;
      }
      this.isShowEduForm = true;
    },
    //关闭弹窗
    closeEdudia() {
      this.isShowEduForm = false;
    },
    //刷新页面a
    refreshPage() {
      this.isShowEduForm = false;
      this.getList();
    },
    //取消合同
    operationContract(item, type) {
      let msg = {
        ContractId: item.Id,
        State: type,
      };
      SetEducationContractAudit(msg).then((res) => {
        if (res.Code == 1) {
          this.$q.notify({
            icon: "iconfont icon-chenggong",
            color: "accent",
            timeout: 2000,
            message: "修改成功！",
            position: "top",
          });
          this.getList();
        }
      });
    },
    //下载pdf
    downloadContract(item) {
      let msg = {
        ContractId: item.Id,
        CType: item.CType,
      };
      GetDownLoadEducationContract(msg).then((res) => {
        if (res.Code == 1) {
          let sign = item.StudentName + "-" + item.ContractNo;
          downloadLocalFile(sign, res.Data);
        }
      });
    },
    //复制合同
    copyContract(item) {
      let msg = {
        ContractId: item.Id,
      };
      SetEducationContractCopy(msg).then((res) => {
        if (res.Code == 1) {
          this.getList();
        }
      });
    },
    //复制URL
    CopyUrl(item) {
      var oInput = document.createElement("input");
      var url = window.location.host;
      oInput.value = url + "/#/contractConfirm" + `?ContractId=${item.Id}`;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      oInput.className = "oInput";
      oInput.style.display = "none";
      this.Info("复制成功!");
    },
  },
};
</script>
<style lang="sass">
@import url('~assets/css/table.sass')
</style>
