<template>
    <div class="app-container">
      <el-form
        :model="queryParams"
        size="mini"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="100px"
      >
        <el-form-item label="交易细项名称" prop="transactionDetailName">

          <el-input
            v-model="queryParams.transactionDetailName"
            placeholder="请输入交易细项名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"/>
        </el-form-item>

        <el-form-item label="项目状态" prop="tradeStatus">
          <el-select
            v-model="queryParams.tradeStatus"
            placeholder="请选择项目状态"
            clearable
            size="small">
            <el-option
              v-for="item in transactionProjectStatus"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"/>
          </el-select>
        </el-form-item>

        <el-form-item label="卖方部门" prop="queryApplyDeptId">
          <div style="width: 160px">
            <treeselect
              v-model="queryParams.queryApplyDeptId"
              :options="deptOptions"
              :show-count="true"
              placeholder="请选择卖方部门"/>
          </div>
        </el-form-item>

        <el-form-item label="买方部门" prop="queryTradeDeptId">
          <div style="width: 160px">
            <treeselect
              v-model="queryParams.queryTradeDeptId"
              :options="deptOptions"
              :show-count="true"
              placeholder="请选择买方部门"/>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="projectList">
        <el-table-column
          label="交易项目"
          align="center"
          prop="relationTransactionProjectId"
          :formatter="transactionProjectName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="交易细项名称"
          align="center"
          prop="transactionDetailName"
          :show-overflow-tooltip="true"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.transactionDetailName">{{scope.row.transactionDetailName}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          label="交易状态"
          align="center"
          prop="tradeStatus"
          :formatter="getTradeStatus"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="卖方"
          align="center"
          prop="applyDeptName"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="申请人" align="center" prop="applyName" />
        <el-table-column label="申请时间" align="center" prop="createTime" width="150px"/>
        <el-table-column label="申报总价" align="center" prop="tradeTotal" />
        <el-table-column
          label="买方"
          align="center"
          prop="tradeDeptName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="买方经办人"
          align="center"
          prop="tradeTransactorName"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="交易评分" align="center" prop="tradeScore" />
        <el-table-column label="交易成交价" align="center" prop="dealPrice" />
        <el-table-column label="尾款" align="center" prop="pendingPayment" width="80"/>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <OperatorButton
              operatorName="tradeDetail"
              :tradeInfo="scope.row"
              @getList="getList"
            />
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
</template>

<script>
  import OperatorButton from "../components/OperatorButton";
  import { getTransactionProjectList } from "@/api/transaction/project.js";
  import { listProject } from "@/api/transaction/tradeProject.js";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { treeselect } from "@/api/system/dept";
  export default {
    name: "tradeQuery",
    components: {
      OperatorButton,
      Treeselect
    },
    data(){
      return{
        loading: false,
        projectList: [],
        transactionProjectStatus: [],
        transactionProjects: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          relationTransactionProjectId: null,
          transactionDetailName: null,
          applyDeptId: null,
          tradeType: null,
          tradeDeptId: null,
          tradeStatus: null,
          createTime: null,
          queryApplyDeptId: null,
          queryTradeDeptId: null
        },
        // 总条数
        total: 0,
        deptOptions: [],
        // 显示搜索条件
        showSearch: true,
      }
    },
    created(){
      this.getList();
      this.getTreeselect();
      this.getTransactionProjects();
      this.getDicts("t_transaction_project_status").then((response) => {
        this.transactionProjectStatus = response.data;
      });
    },
    methods: {
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 查询交易项目列表 */
      getList() {
        this.loading = true;
        listProject({...this.queryParams}).then((response) => {
          this.projectList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      //获取项目列表
      getTransactionProjects(query) {
        getTransactionProjectList(query).then((res) => {
          if (res.code == 200) {
            this.transactionProjects = res.data;
          }
        });
      },
      //获取项目名称
      transactionProjectName(row) {
        let project = this.transactionProjects.find(
          (item) => item.transactionProjectId == row.relationTransactionProjectId
        );
        if (project) {
          return project.transactionProjectName;
        }
        return "-";
      },
      //获取交易状态
      getTradeStatus(row) {
        return this.selectDictLabel(
          this.transactionProjectStatus,
          row.tradeStatus
        );
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then((response) => {
          this.deptOptions = response.data;
        });
      },
    }
  }
</script>

<style scoped>

</style>