<template>
    <div class="export">
        <el-button type="primary" plain @click="openDialog" icon="el-icon-upload2">导入</el-button>
        <el-dialog
            :visible="dialogImportVisible"
            :title="importData.title"
            width="600px"
            :before-close="cancelConfirm"
            :destroy-on-close="true"
            :modal="false"
            :close-on-click-modal="false"
            top="8vh"
        >
            <el-form ref="form" :model="form">
                <!-- <ht-form-item label="选择项目" ref="project" v-if="importData.showProject" class="rulesStyle">
             <project-info-selector
              v-model="form.projectId"
               @input="changed"
               style="width:300px"
             ></project-info-selector>
          </ht-form-item> -->
                <!-- <ht-form-item label="选择合同" v-if="importData.showContract">
          <project-contract-selector
            ref="contract"
            v-model="form.contractId"
            @selectContract="selectContract"
            style="width: 300px"
          ></project-contract-selector>
        </ht-form-item> -->
                <ht-form-item label="请选择合同" v-if="importData.showContract" class="rulesStyle">
                    <el-input
                        v-model="form.contractName"
                        placeholder="请选择合同名称"
                        @focus="handleFocusContract"
                        clearable
                        style="width: 300px"
                    >
                        <el-button
                            type="primary"
                            @click="handleFocusContract"
                            slot="append"
                            icon="el-icon-search"
                        ></el-button>
                    </el-input>

                    <!-- <el-select
            v-model="form.contractId"
            placeholder="请选择合同名称"
            @change="changeContrant"
            clearable
            style="width: 300px"
          >
           <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    >
    </el-option>
          </el-select> -->
                </ht-form-item>
                <ht-form-item
                    label="选择清单信息"
                    v-if="importData.showPriceName"
                    class="rulesStyle"
                >
                    <el-input
                        v-model="form.priceLimitName"
                        placeholder="请选择清单信息名称"
                        @focus="handleFocusPriceLimit"
                        clearable
                        style="width: 300px"
                    >
                        <el-button
                            type="primary"
                            @click="handleFocusPriceLimit"
                            slot="append"
                            icon="el-icon-search"
                        ></el-button>
                    </el-input>
                </ht-form-item>
                <ht-form-item label="默认模板">
                    <a
                        class="download-btn"
                        :download="importData.templateName"
                        :href="importData.downloadUrl"
                    >
                        <i class="el-icon-download"></i>
                        模板下载
                    </a>
                </ht-form-item>
                <ht-form-item label="文件导入">
                    <el-upload
                        style="display: inline-block"
                        :action="importData.importUrl"
                        :on-success="hadleUploadResult"
                        :on-error="hadleUploadResult"
                        :headers="uploadHeaders"
                        :on-exceed="onExceed"
                        accept=".xlsx,.xls"
                        :before-upload="beforeUpload"
                        :limit="1"
                        :data="form"
                        :auto-upload="false"
                        ref="upload"
                    >
                        <el-button type="primary" icon="el-icon-upload" plain
                            >选择Excel文件</el-button
                        >
                    </el-upload>
                </ht-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelConfirm()">取 消</el-button>
                <el-button
                    type="primary"
                    @click="submitImport"
                    element-loading-text="拼命导入中"
                    v-loading.fullscreen.lock="fullscreenLoading"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
        <price-limit-dialog
            ref="price"
            :single="true"
            @select="handleSelectPrice"
        ></price-limit-dialog>
        <project-contract-dialog
            ref="contract"
            :single="true"
            @select="handleSelectContract"
        ></project-contract-dialog>
    </div>
</template>

<script>
import projectContractSelector from '@/components/selector/ProjectContractSelector.vue'
import PriceLimitDialog from '@/components/dialog/PriceLimitDialog.vue'
import ProjectContractDialog from '@/components/dialog/ProjectContractDialog.vue'
import req from '@/request.js'
import HtFormItem from '../control/HtFormItem.vue'
export default {
    name: 'importFile',
    components: {projectContractSelector, PriceLimitDialog, ProjectContractDialog},
    props: {
        importData: {
            type: Object,
            default: () => {
                return []
            },
        },
    },
    data() {
        return {
            options: [],
            disabled: false,
            form: {},
            importDataParams: {},
            dialogImportVisible: false,
            fullscreenLoading: false,
        }
    },
    created() {
        console.log(this.importData, 'importData')
        if (this.importData.title == '年度计划导入') {
            this.importData.showProject = false
        }
    },
    computed: {
        uploadHeaders: function () {
            return {
                Authorization:
                    this.$store.state.login.currentUser &&
                    'Bearer ' + this.$store.state.login.currentUser.token,
            }
        },
    },
    // watch:{
    //    importDataParams(){
    //      return this.importDataParams=this.importData
    //    }
    // },
    methods: {
        //打开清单名称
        handleFocusPriceLimit() {
            this.$refs.price.open(this.form.projectId)
        },
        //获取清单
        handleSelectPrice(data) {
            this.form = {
                projectId: this.form.projectId,
                priceLimitId: data.id,
                priceLimitName: data.name,
            }
        },
        //打开合同信息
        handleFocusContract() {
            this.$refs.contract.open(this.form.projectId)
        },
        //选择合同信息
        handleSelectContract(data) {
            // console.log(data,'data')
            this.form.contractId = data.id
            this.form.contractName = data.name
        },
        // selectContract(cid, obj) {
        //   this.form.contractId = cid
        //   this.form.contractName = obj.name
        // },
        changeContrant(val) {
            this.form.contractId = val
            this.options.forEach((item) => {
                if (item.id == val) {
                    this.form.contractName = item.name
                }
            })
        },
        // changed(pid) {
        //   this.form.projectId = pid
        //   this.$refs.contract.getProjectData(this.importData.projectId)
        //   if (this.importData.showContract) {
        //     this.$refs.contract.contractId = ''
        //     this.$refs.contract.getProjectData(pid)
        //   }
        // },
        openDialog() {
            this.dialogImportVisible = true
            // if(this.importData.projectId && this.importData.contractId){
            //   this.form = {
            //     projectId: this.importData.projectId,
            //     contractId: this.importData.contractId
            //   }
            // }else if (this.importData.projectId) {
            //   this.form = {
            //     projectId: this.importData.projectId
            //   }
            // } else if (this.importData.contractId) {
            //   this.form = {
            //     contractId: this.importData.contractId
            //   }
            // }
            this.form = {
                projectId: this.importData.projectId,
                contractId: this.importData.contractId,
                contractName: this.form.contractName,
                title: this.importData.title,
            }
            if (this.importData.showContract) {
                this.getProjectData(this.importData.projectId)
            }
        },
        getProjectData(val) {
            let param = {
                pageBean: {
                    page: 1,
                    pageSize: -1,
                    showTotal: true,
                },
                querys: [
                    {
                        group: 'main',
                        operation: 'EQUAL',
                        parentGroup: '',
                        property: 'pm.ID_',
                        relation: 'AND',
                        value: val,
                    },
                ],
            }
            //  let param = {
            //   'pm.ID_': val.projectId,
            //   register_date_: this.searchForm.registerDate,
            //   register_person_name_: this.searchForm.registerPersonName,
            // }

            this.$http.post('${cqxy}/biz/contract/v1/page', param).then((res) => {
                let resp = res.data.value.rows
                let newArr = []
                resp.forEach((item) => {
                    let obj = item.contract
                    newArr.push(obj)
                })
                this.options = newArr
            })
        },
        cancelConfirm() {
            this.$refs.upload.clearFiles()
            this.dialogImportVisible = false
            this.$refs.upload.uploadFiles = []
        },
        submitImport() {
            console.log(this.importData.showProject, 'this.importData.showProject')
            if (!this.$refs.upload.uploadFiles || this.$refs.upload.uploadFiles.length == 0) {
                this.$message.warning('请选择要导入的数据文件!')
                return false
            } else if (
                this.importData.showProject == true &&
                (this.form.projectId == '' || this.form.projectId == undefined)
            ) {
                this.$message.warning('请选择一条项目')
                return false
            } else if (this.importData.showContract && this.form.contractId == '') {
                this.$message.warning('请选择一条合同')
                return false
            } else if (this.importData.showPriceName == true && this.form.priceLimitId == '') {
                this.$message.warning('请选择一条清单信息')
                return false
            }
            this.$refs.upload.submit()
            // this.form.projectId = ''
            // this.form.contractId = ''
            // this.form.priceLimitId = ''
            // this.form.priceLimitName = ''
        },
        hadleUploadResult(response) {
            this.fullscreenLoading = false
            if (response.state) {
                this.$message.success(response.message)
                this.dialogImportVisible = false
                // this.$parent.$refs.AtTable.load()
                this.$emit('load', response.value)
            } else {
                this.$message.error(response.message)
            }
        },
        onExceed() {
            this.$message.warning('只能选择一个Excel文件!')
        },
        beforeUpload(file) {
            this.fileInfo = file
            if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.xls')) {
                this.$message.warning('只能导入Excel文件!')
                return false
            }
            this.fullscreenLoading = true
        },
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.download-btn {
    color: #fff;
    background-color: $--color-primary;
    border-color: $--color-primary;
    padding: 10px 15px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}
.export {
    margin-left: 10px;
}
/deep/ .el-form-item__label {
    width: 150px !important;
}
.rulesStyle /deep/ .el-form-item__label::before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
}
</style>
