<template>
  <div class="fullheight">
    <el-dialog
      :visible.sync="detailtable"
      :open="open"
      :before-close="beforedetailDialog"
      width="1000px"
      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>
          <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"
          >
          </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"
      titles="【年度总预算明细】"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
    >
      <el-form
        v-form
        data-vv-scope="BizYearBudgetDetailedForm"
        :model="BizYearBudgetDetailed"
      >
        <el-row>
          <el-col :span="12">
            <ht-form-item label="所属公司" label-width="120px">
              <el-input
                v-model="BizYearBudgetDetailed.company"
                disabled
              ></el-input>
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 1：付现成本支出，2：非付现成本支出 -->
            <ht-form-item label="支出分类" label-width="120px">
              <el-input
                v-model="BizYearBudgetDetailed.expenditureType"
                disabled
              >
                <template v-slot="scope">
                  {{
                    BizYearBudgetDetailed.expenditureType == 1
                      ? '付现成本支出'
                      : '非付现成本支出'
                  }}
                </template>
              </el-input>
            </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">
              <el-input
                v-model="BizYearBudgetDetailed.budgetType"
                disabled
              ></el-input>
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 使用字典维护 -->
            <ht-form-item label="预算项目" label-width="120px">
              <el-input
                v-model="BizYearBudgetDetailed.budgetItem"
                disabled
              ></el-input>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <ht-form-item label="预算内容" label-width="120px">
              <el-input
                v-model="BizYearBudgetDetailed.budgetContent"
                disabled
              ></el-input>
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 0：否，1：是 -->
            <ht-form-item label="是否追加预算" label-width="120px">
              <el-input v-model="BizYearBudgetDetailed.addTo" disabled>
              </el-input>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="工程数量:"
              prop="quantities"
              style="display: flex"
            >
              <el-input v-model="BizYearBudgetDetailed.quantities" disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="单价" label-width="120px">
              <el-input
                v-model="BizYearBudgetDetailed.unitPrice"
                disabled
              ></el-input>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <ht-form-item label="总价" label-width="120px">
              <el-input v-model="BizYearBudgetDetailed.totalPrice" disabled>
              </el-input>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <ht-form-item label="备注" label-width="120px">
              <el-input
                v-model="BizYearBudgetDetailed.remark"
                disabled
                type="textarea"
              >
              </el-input>
            </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>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import eipOrgSelector from '@/components/eipControl/selector/EipOrgSelector.vue'
export default {
  components: {
    eipOrgSelector
  },
  data() {
    return {
      querySearch: [
        {
          label: '公司名称',
          prop: 'company_name_'
        }
      ],
      addTo: [
        {key: 1, value: '是 '},
        {key: 0, value: '否'}
      ],
      expenditureType: [
        {key: 1, value: '付现成本支出 '},
        {key: 0, value: '非付现成本支出'}
      ],
      detailtable: false,
      dialogVisible: false,
      data: [],
      // rules: {
      //   quantities: {
      //     required: true,
      //     message: '工程数量',
      //     trigger: 'blur',
      //   },
      // },
      permission: 'b',
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      // param: [
      //     {
      //       operation: 'EQUAL',
      //       property: 'ascriptionYear',
      //       relation: 'AND',
      //       value: this.detarow.ascriptionYear,
      //     },
      //     {
      //       operation: 'EQUAL',
      //       property: 'yearBudgetId',
      //       relation: 'AND',
      //       value: this.detarow.id,
      //     },
      //   ],
      BizYearBudgetDetailed: {
        addTo: 0,
        expenditureType: 1,
        quantities: 1
      },
      saveMethod: 'POST',
      titles: '',
      detarow: {}
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    beforedetailDialog() {
      this.detarow = {}
      this.detailtable = false
    },
    open(row) {
      console.log(row)
      this.detarow = row
      this.detailtable = true
    },
    handleEdit(data) {
      // this.titles = '修改'
      this.dialogVisible = true
      this.BizYearBudgetDetailed = data
    },
    showDialog() {
      this.dialogVisible = true
      // this.titles = '添加'
      this.BizYearBudgetDetailed = {
        addTo: 0,
        expenditureType: 1,
        quantities: 1
      }
    },
    beforeCloseDialog() {
      this.BizYearBudgetDetailed = {
        addTo: 0,
        expenditureType: 1,
        quantities: 1
      }
      this.dialogVisible = false
      // this.titles = ''
    },
    loadData(param, cb) {
      console.log(this.detarow, '进去了')
      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-dialog__header {
  border-bottom: 1px solid #ebeef5;
}

::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;
}
</style>
