<template>
  <div class="fullheight">
    <el-dialog
      :visible.sync="detailtable"
      :open="open"
      :before-close="beforedetailDialog"
      width="90%"
      title="年度总预算明细"
      :destroy-on-close="true"
      v-if="detailtable"
      append-to-body
    >
      <ht-table
        @load="loadData"
        :data="data"
        :pageResult="pageResult"
        :selection="true"
        :quick-search-props="querySearch"
        :show-export="false"
        :show-custom-column="false"
        ref="htTable"
        @row-dblclick="handleEdit"
      >
        <template v-slot:toolbar>
          <!-- <el-button-group> -->
          <el-button
            type="primary"
            size="small"
            @click="showDialog()"
            icon="el-icon-plus"
            >添加</el-button
          >
          <ht-delete-button
            url="${form}/yearBudgetDetailed/v1/updateYearBudgetDetailed"
            :htTable="$refs.htTable"
            >删除</ht-delete-button
          >
          <!-- </el-button-group> -->
        </template>
        <template>
          <!-- <ht-table-column
            prop="company"
            label="所属公司"
            :sortable="true"
            width="120"
            :show-overflow-tooltip="true"
          >
          </ht-table-column>

          <ht-table-column
            prop="ascriptionYear"
            label="所属年限"
            width="120"
            :sortable="true"
            :show-overflow-tooltip="true"
          >
          </ht-table-column> -->
          <!-- 0：否，1：是 -->
          <ht-table-column
            prop="addTo"
            label="是否追加预算"
            :show-overflow-tooltip="true"
            width="130"
            :filters="[
              {text: '是', value: 1},
              {text: '否', value: 0}
            ]"
          >
            <template v-slot="{row}">
              <el-tag type="primary" v-if="row.addTo == 1">是</el-tag>
              <el-tag type="success" v-else-if="row.addTo == 0">否</el-tag>
            </template>
          </ht-table-column>
          <!-- 1：付现成本支出，2：非付现成本支出 -->
          <ht-table-column
            prop="expenditureType"
            label="支出分类"
            :show-overflow-tooltip="true"
            width="120"
          >
            <template v-slot="{row}">
              <el-tag type="primary" v-if="row.expenditureType == 1"
                >付现成本支出</el-tag
              >
              <el-tag type="success" v-else-if="row.expenditureType == 0"
                >非付现成本支出</el-tag
              >
            </template>
          </ht-table-column>
          <!-- 1：人员经费，2：办公经费，3：日常经费，4：日常专项经费，5：非日常专项经费，6：其它 -->
          <ht-table-column
            prop="budgetType"
            label="预算分类"
            :show-overflow-tooltip="true"
          >
            <template v-slot="{row}">
              <el-tag>{{ getDictName('YSGL', row.budgetType) }}</el-tag>
            </template>
          </ht-table-column>
          <!-- 预算项目,使用字典维护 -->
          <ht-table-column
            prop="budgetItem"
            label="预算项目"
            :show-overflow-tooltip="true"
          >
          </ht-table-column>
          <ht-table-column
            prop="budgetContent"
            label="预算内容"
            :show-overflow-tooltip="true"
          >
          </ht-table-column>

          <ht-table-column
            prop="quantities"
            label="工程量"
            :sortable="true"
            :show-overflow-tooltip="true"
          >
          </ht-table-column>
          <ht-table-column
            prop="unitPrice"
            label="单价(万元)"
            width="120"
            :sortable="true"
            :show-overflow-tooltip="true"
          >
          </ht-table-column>
          <ht-table-column
            prop="totalPrice"
            label="总价(万元)"
            width="120"
            :sortable="true"
            :show-overflow-tooltip="true"
          >
          </ht-table-column>
          <ht-table-column
            prop="remark"
            label="备注"
            :show-overflow-tooltip="true"
            width="200"
          >
          </ht-table-column>
        </template>
      </ht-table>
    </el-dialog>

    <el-dialog
      width="1000px"
      :title="
        titles == '添加' ? '【年度总预算明细】添加' : '【年度总预算明细】修改'
      "
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
      :open="dialogopen"
    >
      <el-form
        v-form
        data-vv-scope="BizYearBudgetDetailedForm"
        :model="BizYearBudgetDetailed"
      >
        <el-row>
          <el-col :span="12">
            <ht-form-item label="所属公司" label-width="120px">
              <!-- <ht-input
                v-model="BizYearBudgetDetailed.company"
                validate="required"
              /> -->
              <eip-org-selector
                v-model="BizYearBudgetDetailed.company"
                :permission="permission"
                :single="true"
                append-to-body
                :config="{
                  id: 'BizYearBudgetDetailed.companyId',
                  name: 'BizYearBudgetDetailed.companyName'
                }"
                placeholder="请选择"
              />
            </ht-form-item>
          </el-col>

          <el-col :span="12">
            <!-- 1：付现成本支出，2：非付现成本支出 -->
            <ht-form-item label="支出分类" label-width="120px">
              <!-- <ht-input
                v-model="BizYearBudgetDetailed.expenditureType"
                validate="required"
              /> -->
              <ht-select
                v-model="BizYearBudgetDetailed.expenditureType"
                :options="expenditureType"
                :validate="{required: true}"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <!-- 1：人员经费，2：办公经费，3：日常经费，4：日常专项经费，5：非日常专项经费，6：其它 -->
            <ht-form-item label="预算分类" label-width="120px">
              <!-- <ht-input
                v-model="BizYearBudgetDetailed.budgetType"
                validate="required"
              /> -->
              <!-- <dict-select
                dictCode="ysfl"
                :hasDefaultOption="true"
                clearable
                v-model="BizYearBudgetDetailed.budgetType"
                :validate="{required: true}"
              /> -->
              <el-select
                v-model="BizYearBudgetDetailed.budgetType"
                placeholder="请选择"
                @change="changesele"
              >
                <el-option
                  v-for="item in budgetType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 使用字典维护 -->
            <ht-form-item label="预算项目" label-width="120px">
              <!-- <ht-input
                v-model="BizYearBudgetDetailed.budgetItem"
                validate="required"
              /> -->
              <el-select
                v-model="BizYearBudgetDetailed.budgetItem"
                placeholder="请选择"
                @change="changesele"
              >
                <el-option
                  v-for="item in ysxm"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <ht-form-item label="预算内容" label-width="120px">
              <ht-input
                v-model="BizYearBudgetDetailed.budgetContent"
                validate="required"
              />
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 0：否，1：是 -->
            <ht-form-item label="是否追加预算" label-width="120px">
              <!-- <ht-input
                v-model="BizYearBudgetDetailed.addTo"
                validate="required"
              /> -->
              <ht-select
                v-model="BizYearBudgetDetailed.addTo"
                :options="addTo"
                :validate="{required: true}"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <!-- <ht-form-item label="工程数量" label-width="120px">
              <ht-input
                v-model="BizYearBudgetDetailed.quantities"
                validate="required"
                type="number"
                placeholder="工程数量"
              />
            </ht-form-item> -->
            <el-form-item
              label="工程数量:"
              prop="quantities"
              style="display: flex"
            >
              <el-input
                v-model="BizYearBudgetDetailed.quantities"
                type="number"
                width="100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="单价" label-width="120px">
              <ht-input
                v-model="BizYearBudgetDetailed.unitPrice"
                placeholder="单价"
              >
                <template v-slot:suffix>
                  <i slot="suffix">万元</i>
                </template>
              </ht-input>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <ht-form-item label="总价" label-width="120px">
              <ht-input
                v-model="BizYearBudgetDetailed.totalPrice"
                :readonly="true"
                disabled
                placeholder="工程数量 * 单价"
                math-exp="{工程数量(BizYearBudgetDetailed.quantities)} * {单价(BizYearBudgetDetailed.unitPrice)}"
              >
                <template v-slot:suffix>
                  <i slot="suffix">万元</i>
                </template>
              </ht-input>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <ht-form-item label="备注" label-width="120px">
              <ht-input
                v-model="BizYearBudgetDetailed.remark"
                type="textarea"
              />
            </ht-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- <div slot="footer" style="text-align: right">
        <el-button @click="beforeCloseDialog">{{
          $t('ht.common.cancel')
        }}</el-button>
        <ht-submit-button
          url="${form}/yearBudgetDetailed/v1/saveYearBudgetDetailed"
          :model="BizYearBudgetDetailed"
          :request-method="saveMethod"
          scope-name="BizYearBudgetDetailedForm"
          @after-save-data="afterSaveData"
          >{{ $t('ht.common.save') }}</ht-submit-button
        >
      </div> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import eipOrgSelector from '@/components/eipControl/selector/EipOrgSelector.vue'
import basicData from '@/api/basicData.js'
import Dict from '@/components/dict/DictSelectUtils.js'
export default {
  components: {
    eipOrgSelector
  },
  data() {
    return {
      // <!-- 1：人员经费，2：办公经费，3：日常经费，4：日常专项经费，5：非日常专项经费，6：其它 -->
      db: [
        {key: 1, label: '人员经费'},
        {key: 2, label: '办公经费'},
        {key: 3, label: '日常经费'},
        {key: 4, label: '日常专项经费'},
        {key: 5, label: '非日常专项经费'},
        {key: 6, label: '其它'}
      ],
      querySearch: [
        {
          label: '公司名称',
          prop: 'company_name_'
        }
      ],
      addTo: [
        {key: 1, value: '是 '},
        {key: 0, value: '否'}
      ],
      expenditureType: [
        {key: 1, value: '付现成本支出 '},
        {key: 0, value: '非付现成本支出'}
      ],
      budgetType: [],
      ysxm: [],
      detailtable: false,
      dialogVisible: false,
      data: [],
      // rules: {
      //   quantities: {
      //     required: true,
      //     message: '工程数量',
      //     trigger: 'blur',
      //   },
      // },
      permission: 'b',
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      BizYearBudgetDetailed: {
        addTo: 0,
        expenditureType: 1,
        quantities: 1
      },
      saveMethod: 'POST',
      titles: '',
      detarow: {},
      yearBudgetId: '',
      ascriptionYear: ''
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    beforedetailDialog() {
      this.detarow = {}
      this.detailtable = false
    },
    open(row) {
      this.detarow = row
      this.detailtable = true
      this.yearBudgetId = row.id
      this.ascriptionYear = row.ascriptionYear
    },
    changesele(value) {
      if (this.ysxm.length == 0) {
        basicData.getCostAccountManagement(value).then(res => {
          res.data.forEach(item => {
            console.log(item)
            this.ysxm.push({
              label: item.subjectName,
              value: item.subjectCode
            })
          })
        })
      }
    },
    handleEdit(data) {
      this.titles = '修改'
      this.dialogVisible = true
      this.BizYearBudgetDetailed = data
      this.dialogopen()
    },
    showDialog() {
      this.dialogVisible = true
      this.titles = '添加'
      this.BizYearBudgetDetailed = {
        addTo: 0,
        expenditureType: 1,
        quantities: 1,
        yearBudgetId: this.yearBudgetId,
        ascriptionYear: this.ascriptionYear
      }
      this.dialogopen()
    },
    dialogopen() {
      if (this.budgetType.length == 0) {
        let data = 'YSGL'
        basicData.getCostAccountManagement(data).then(res => {
          res.data.forEach(item => {
            console.log
            this.budgetType.push({
              label: item.subjectName,
              value: item.subjectCode
            })
          })
        })
      }
    },
    handleSubmit() {
      // 验证表单是否填写完
      // this.$refs.ruleForm.validate((bool) => {
      //   if (bool) {
      //     this.dialogVisible = false
      //     //请求保存提交
      //     this.$http
      //       .post('${form}/yearBudgetDetailed/v1/saveYearBudgetDetailed', data)
      //       .then((res) => {
      //         console.log(res)
      //         this.$message({
      //           message: res.data.message,
      //           type: 'success',
      //         })
      //         this.BizYearBudgetDetailed = {}
      //         this.$refs.htTable.load()
      //       })
      //   }
      // })
      this.dialogVisible = false
      console.log(this.BizYearBudgetDetailed)
      this.$http
        .post(
          '${form}/yearBudgetDetailed/v1/saveYearBudgetDetailed',
          this.BizYearBudgetDetailed
        )
        .then(res => {
          console.log(res)
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.BizYearBudgetDetailed = {}
          this.$refs.htTable.load()
        })
    },
    beforeCloseDialog() {
      this.BizYearBudgetDetailed = {
        addTo: 0,
        expenditureType: 1,
        quantities: 1
      }
      this.dialogVisible = false
      this.titles = ''
    },
    loadData(param, cb) {
      if (this.detarow) {
        param.querys = [
          {
            operation: 'EQUAL',
            property: 'ascriptionYear',
            relation: 'AND',
            value: this.detarow.ascriptionYear
          },
          {
            operation: 'EQUAL',
            property: 'yearBudgetId',
            relation: 'AND',
            value: this.detarow.id
          }
        ]
        this.$http
          .post('${form}/yearBudgetDetailed/v1/getJson', param)
          .then(
            resp => {
              let response = resp.data
              this.data = response.rows
              this.pageResult = {
                page: response.page,
                pageSize: response.pageSize,
                total: response.total
              }
            },
            error => {
              reject(error)
            }
          )
          .finally(() => cb())
      } else {
        console.log('没执行')
      }
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$refs.htTable.load()
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.sp-manager__dialog ::v-deep > .el-dialog > .el-dialog__body {
  height: calc(100% - 170px);
}

//  ::v-deep .el-dialog {
//   height: 100% !important;
//   margin-top: 0 !important;
// }
::v-deep .el-form-item__content .inputs {
  width: 100%;
}

::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}

::v-deep .el-input-number--small {
  width: 100%;
}

::v-deep .el-form-item--small .el-form-item__label {
  width: 120px;
}

::v-deep .el-select {
  width: 100%;
}

::v-deep .el-dialog__header {
  border-bottom: 1px solid #ebeef5;
}
</style>
