<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 />
        </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==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>
          </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" icon="edit" color="accent" v-if="props.row.Status==1" style="font-weight:400"
                @click="operationContract(props.row,2)" label="审核通过" />
              <q-btn flat size="xs" icon="edit" color="accent" v-if="props.row.Status==1" style="font-weight:400"
                @click="operationContract(props.row,3)" label="驳回" />

              <q-btn flat size="xs" icon="edit" color="accent"
                v-if="props.row.IsStuSign==1&& props.row.IsCompanySeal==0&&props.row.Status==2"
                style="font-weight:400" @click="operationContract(props.row,5)" label="盖章" />
              <q-btn flat size="xs" icon="iconfont icon-View" color="accent" @click="goContract(props.row)"
                style="font-weight:400" label="查看" />
            </div>
          </q-td>
        </template>
      </q-table>
    </div>
  </div>
</template>
<script>
  import {
    GetEducationContractPageList,
    SetEducationContractAudit
  } from '../../api/sale/contract'

  export default {
    meta: {
      title: "合同审核"
    },
    components: {

    },
    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: 'CourseName',
            label: '课程名称',
            align: 'left',
            field: 'CourseName'
          },

          {
            name: 'CreateByName',
            label: '创建人',
            align: 'left',
            field: 'CreateByName'
          },
          {
            name: 'CreateTime',
            label: '创建时间',
            align: 'left',
            field: 'CreateTime'
          },
          {
            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: '', //学生姓名
          IsAduit: 1
        },
        pageCount: 0,
        dataList: [],
        //类型下拉
        CTypeList: [{
          Id: 0,
          Name: '不限'
        }, {
          Id: 1,
          Name: '培训'
        }, {
          Id: 2,
          Name: '留学'
        }],
        //状态下拉
        StatusOpts: [{
          Id: -1,
          Name: '全部'
        }, {
          Id: 1,
          Name: '待审'
        }, {
          Id: 2,
          Name: '审核通过'
        }, {
          Id: 3,
          Name: '驳回'
        }],
      }
    },
    created() {},
    mounted() {
      this.getList()
    },
    methods: {
      //获取校区列表
      getList() {
        this.loading = true;
        GetEducationContractPageList(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) {
        // this.$router.push({
        //   path: 'contractView',
        //   query: {
        //     "Id": item.Id
        //   }
        // })
        let routeUrl = this.$router.resolve({
          path: "/contractView",
          query: {
            ContractId: item.Id
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      //合同操作
      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();
          }
        })
      }
    },
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
