<!-- 根据合同id，查询合同细目，选择返回-->
<template>
    <el-dialog
        top="2vh"
        title="选择合同明细"
        v-if="dialogVisible"
        width="900px"
        appendToBody
        :visible.sync="dialogVisible"
        @close="close"
    >
        <section style="margin-bottom: 10px">
            课目名称:
            <el-select
                style="margin-right: 10px"
                v-model="form.subjectName"
                placeholder="请选择"
                @change="(val) => changeSelection(val)"
                clearable
                @focus="initData"
            >
                <el-option
                    v-for="item in selectOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
            细课目名称:
            <el-select
                style="margin-right: 10px"
                v-model="form.fineSubjectName"
                placeholder="请选择"
                @change="(val) => changeFineSubject(val)"
                clearable
            >
                <el-option
                    v-for="item in subOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="primary" plain @click="reSearch">重置</el-button>
        </section>
        <div style="height: 300px">
            <ht-table
                @load="loadData"
                :data="data"
                :selectable="false"
                :highlightCurrentRow="true"
                :page-result="pageBean"
                ref="htTable"
                :show-export="false"
                :show-custom-column="false"
                @row-click="rowClick"
            >
                <!-- <el-table stripe :data="itemList" border max-height="250"> -->
                <template>
                    <el-table-column align="center" width="50">
                        <template slot-scope="scope">
                            <el-radio
                                v-model="selectedId"
                                :label="scope.row.id"
                            ></el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="subjectName"
                        label="课目名称"
                        :show-overflow-tooltip="true"
                    >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="fineSubjectName"
                        label="细课目名称"
                        :show-overflow-tooltip="true"
                    >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="spec"
                        label="单位"
                        :show-overflow-tooltip="true"
                    >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="price"
                        label="单价(元)"
                    >
                    </el-table-column>
                    <el-table-column align="center" prop="amount" label="数量">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="monty"
                        label="金额(元)"
                    >
                    </el-table-column>
                    <el-table-column align="center" prop="remarks" label="备注">
                    </el-table-column>
                </template>
                <!-- </el-table> -->
            </ht-table>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleOK" size="medium"
                >确 定</el-button
            >
            <el-button @click="close" size="medium">取 消</el-button>
        </span>
    </el-dialog>
</template>

<script>
import basicData from '@/api/basicData'
import dialogApi from '@/api/dialogApi'
export default {
    name: 'SelectContractDialog',
    data() {
        return {
            dialogVisible: false,
            contractId: '',
            selectOptions: [],
            subOptions: [],
            form: {
                subjectName: '',
                subjectCode: '',
                fineSubjectName: '',
                fineSubjectCode: '',
            },
            data: [],
            pageBean: {
                page: 1,
                pageSize: 20,
                total: 0,
            },
            selectedId: '',
        }
    },
    created() {
        this.initSelectOptions()
    },
    methods: {
        rowClick(row) {
            this.activeRow = row
            this.selectedId = row.id
        },
        initData() {
            if (!this.selectOptions.length) {
                this.initSelectOptions()
            }
        },
        initSelectOptions() {
            let data = 'CBKM'
            basicData.getCostAccountManagement(data).then((res) => {
                res.data.forEach((item) => {
                    this.selectOptions.push({
                        label: item.subjectName,
                        value: item.subjectCode,
                    })
                })
            })
            console.log(this.selectOptions, 'this.selectOptions')
        },
        changeSelection(value) {
            this.form.subjectCode = value
            this.subOptions = []
            this.form.fineSubjectName = ''
            this.form.fineSubjectCode = ''
            basicData.getCostAccountManagement(value).then((res) => {
                if (res.data.length > 0) {
                    let arr = []
                    res.data.forEach((item) => {
                        if (item.pcode == value) {
                            arr.push({
                                label: item.subjectName,
                                value: item.subjectCode,
                            })
                        }
                    })
                    this.subOptions = arr
                    this.form.fineSubjectName = arr[0].label
                    this.form.fineSubjectCode = arr[0].value
                }
            })
            console.log(this.subOptions)
        },
        changeFineSubject(val) {
            this.form.fineSubjectCode = val
        },
        reSearch() {
            this.form.fineSubjectName = ''
            this.form.fineSubjectCode = ''
            this.subjectName = ''
            this.subjectCode = ''
            let param = {
                pageBean: this.pageBean,
            }
            this.loadData(param)
        },
        search() {
            let param = {
                pageBean: this.pageBean,
            }
            this.loadData(param)
        },
        handleOK() {
            if (this.selectedId) {
                let selection = this.data.filter(
                    (item) => item.id == this.selectedId
                )[0]
                this.$emit('change', selection, this.currentIndex)
            }
            this.close()
        },
        open(index, contractId) {
            this.currentIndex = index
            this.contractId = contractId
            this.dialogVisible = true
        },
        loadData(param, cb) {
            if (!param.querys) {
                param.querys = [
                    {
                        group: 'main',
                        operation: 'EQUAL',
                        property: 'CONTRACT_ID_',
                        relation: 'AND',
                        value: this.contractId,
                    },
                ]
            }
            if (this.form.subjectCode) {
                param.querys.push({
                    group: 'main',
                    operation: 'EQUAL',
                    parentGroup: '',
                    property: 'CODE_',
                    relation: 'AND',
                    value: this.form.subjectCode,
                })
            }
            if (this.form.fineSubjectCode) {
                param.querys.push({
                    group: 'main',
                    operation: 'EQUAL',
                    parentGroup: '',
                    property: 'FINE_SUBJECT_CODE_',
                    relation: 'AND',
                    value: this.form.fineSubjectCode,
                })
            }
            dialogApi
                .getContractItem(param)
                .then((resp) => {
                    this.data = resp.rows
                    this.pageBean = {
                        page: resp.page,
                        pageSize: resp.pageSize,
                        total: resp.total,
                    }
                })
                .finally(() => {
                    if (cb) {
                        cb()
                    }
                })
        },
        close() {
            this.dialogVisible = false
            this.contractId = ''
            this.selectedId = ''
            this.data = []
            this.selectOptions = []
            this.subOptions = []
            this.form = {
                subjectName: '',
                subjectCode: '',
                fineSubjectName: '',
                fineSubjectCode: '',
            }
            this.currentIndex = ''
        },
    },
}
</script>

<style>
</style>