<template>
    <div class="main">
        <div class="header">
            <el-form :inline="true" :model="contractQuery">
                <!-- 合同名称，合同编号，合同类型，合同性质 -->
                <el-form-item>
                    <el-input v-model="contractQuery.contractName" placeholder="请选择合同名称" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="contractQuery.contractNumber" placeholder="请选择合同编号" />
                </el-form-item>
                <el-form-item>
                    <el-select v-model="contractQuery.typeId" placeholder="请选择合同类型">
                        <el-option v-for="item in contractTypeList" :key="item.id" :value="item.id"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="contractQuery.contractNature" placeholder="合同性质">
                        <el-option v-for="(item, index) in contractNatures" :key="index" :label="item" :value="index">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="getContractList(true)">查询</el-button>
                    <el-button type="primary" icon="el-icon-refresh-right" @click="contractQuery = {}; getContractList(false)">重置</el-button>
                    <el-button type="success" icon="el-icon-circle-plus-outline" @click="dialogTableVisible = true">添加合同
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="container">
            <el-table :data="contractList" style="width: 100%;text-align: center;" border>
                <el-table-column label="编号" width="50px">
                    <template slot-scope="scope">
                        {{ (contractPageQuery.pageNum - 1) * contractPageQuery.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="companyName" label="状态"/> -->
                <el-table-column prop="contractNumber" label="合同编号" width="120px" />
                <el-table-column prop="contractName" label="合同名称" width="200px" />
                <el-table-column label="合同类型">
                    <template slot-scope="scope">
                        <!-- {{Object.values(contractTypeList.find(item => item.id === scope.row.typeId)).toString()}} -->
                        <!-- {{Object.values(contractTypeList.find(item => item.id === scope.row.typeId))}} -->
                        {{ contractTypeList.find(item => item.id === scope.row.typeId) && contractTypeList.find(item =>
                                item.id === scope.row.typeId).name
                        }}
                    </template>
                </el-table-column>
                <el-table-column prop="contractNature" label="合同性质">
                    <template slot-scope="scope">
                        {{ contractNatures[scope.row.contractNature] }}
                    </template>
                </el-table-column>
                <el-table-column prop="contractMoney" label="合同金额/元" />
                <el-table-column prop="partybName" label="签定人" width="100px" />
                <el-table-column prop="safekeeping" label="保管人" width="100px" />
                <el-table-column prop="contractStartTime" label="签订时间" />
                <el-table-column prop="companyCreateTime" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit"
                            @click="$router.push({ path: '/editContract', query: { contractId: String(scope.row.contractId) } })">
                            编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="footer">
            <el-pagination @current-change="getContractList()" :current-page.sync="contractPageQuery.pageNum"
                :page-size="contractPageQuery.pageSize" layout="total, prev, pager, next" :total="total">
            </el-pagination>
        </div>

        <el-dialog title="添加合同" :visible.sync="dialogTableVisible">
            <el-radio-group v-model="checkedContractNature">
                <el-radio v-for="(item, index) in contractNatures" :key="index" :label="index">{{ item }}</el-radio>
            </el-radio-group>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary"
                    @click="$router.push({ path: '/addContract', query: { checkedContractNature: String(checkedContractNature) } })">
                    下一步</el-button>
                <el-button @click="dialogTableVisible = false">取消</el-button>
            </span>
        </el-dialog>
        <!-- <add-conctract :drawerVisible="drawerVisible" @addConctract="addConctract" @closeDrawer="drawerVisible=false"></add-conctract> -->
    </div>
</template>
<script>
// import AddConctract from './components/addContract.vue'
import { selectContractList, selectAllContractTypeList } from "@/api/contract"
import { deepClone } from "@/utils"
import { mapGetters } from 'vuex'
import { contractNatures as contractNatureList } from './contractStaticData'
export default {
    // components: {
    //     AddConctract
    // },
    computed: {
        ...mapGetters([
            'companyId'
        ]),
    },
    data() {
        return {
            contractList: [],
            contractTypeList: [],
            typeList: [],
            type: '',
            total: 0,
            contractQuery: {
                typeId: '',
                contractNature: '',
                contractName: '',
                contractNumber: ''
            },
            contractPageQuery: {
                pageSize: 10,
                pageNum: 1,
            },
            contractNatures: deepClone(contractNatureList),
            dialogTableVisible: false,
            checkedContractNature: 0,
            isConditionSelect: false
            // drawerVisible: false,
        }
    },
    mounted() {
        this.getContractTypeList()
        this.getContractList(false)
    },
    methods: {
        getContractTypeList() {
            const params = {
                state: 0,
                companyId: this.companyId || this.$store.getters.companyId
            }
            selectAllContractTypeList(params).then(res => {
                if (res.success) {
                    // console.log(res.data)
                    this.contractTypeList = res.data
                } else {
                    this.$message.warning("获取合同类型失败")
                }
            })
        },
        getContractList(isConditionSelect) {
            const params = {
                ...this.contractPageQuery,
                companyId: this.companyId || this.$store.getters.companyId
            }
            //不能确定是不是条件查询，则根据上一个查询方式进行条件查询或者一般查询，=== 切换分页时候
            if(isConditionSelect === undefined || isConditionSelect === ''){
                this.isConditionSelect && Object.assign(params, this.contractQuery)
                Object.assign(params, this.contractPageQuery)
            //确定是某种查询方式，则更新标记，作为下一次查询的标准
            }else{
                this.isConditionSelect = isConditionSelect
                isConditionSelect && Object.assign(params, this.contractQuery)
                params.pageNum = 1
                this.contractPageQuery.pageNum = 1
            }
            selectContractList(params).then(res => {
                if (res.success) {
                    this.total = res.data.total
                    this.contractList = res.data.list
                } else {
                    this.$message.error("获取数据失败")
                }
            })
        },
        addConctract(params) {
            console.log(params)
        }
    }
}
</script>
<style scoped lang="scss">
.main {
    padding: 15px;
    .footer {
        text-align: right;
    }
}

</style>
