<template>
  <div class="edit-add-detail">
    <div class="crumbs">
      <Breadcrumb
        :breadcrumbOpt="breadcrumbOpt"
        svg-name="#icon-icon_personalcenter"
        @breadcrumb-click="handleClose"
      />
    </div>
    <div class="form-content">
      <el-form
        ref="formInfo"
        :model="parameter"
        label-width="auto"
        label-position="right"
        :rules="rules"
      >
        <div class="rows" @click="handleOver">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">基本信息</div>
          </div>
          <i
            :class="!flexAuto ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"
            style="margin-left: 10px"
          ></i>
        </div>
        <div :class="!flexAuto ? 'auto' : 'classNone'">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="项目编号" prop="projectCode">
                <el-input
                  clearable
                  v-model="parameter.projectCode"
                  placeholder="请输入项目编号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目名称" prop="projectName">
                <el-input
                  clearable
                  v-model="parameter.projectName"
                  placeholder="请输入项目名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="填报单位" prop="purchasingOrgName">
                <el-input
                  clearable
                  v-model="parameter.purchasingOrgName"
                  placeholder="请输入填报单位"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目负责人" prop="projectUserName">
                <el-input
                  clearable
                  v-model="parameter.projectUserName"
                  placeholder="请输入项目负责人"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="联系电话" prop="projectUserMobile">
                <el-input
                  clearable
                  v-model="parameter.projectUserMobile"
                  placeholder="请输入联系电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开始时间" prop="constructionStartTime">
                <el-date-picker
                  v-model="parameter.constructionStartTime"
                  type="date"
                  placeholder="开始时间"
                  @change="changeStartTime"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="结束时间"
                prop="constructionCompletionTime"
              >
                <el-date-picker
                  v-model="parameter.constructionCompletionTime"
                  type="date"
                  @change="changeEndTime"
                  :picker-options="pickerOptionsEnd"
                  placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属年度" prop="year">
                <el-date-picker
                  v-model="parameter.year"
                  type="year"
                  placeholder="所属年度"
                  value-format="yyyy"
                  format="yyyy"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="预估总投资（万元）" prop="investment">
                <el-input
                  clearable
                  v-model="parameter.investment"
                  placeholder="请输入预估总投资"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <el-form
        ref="formInfo"
        :model="parameter"
        label-width="auto"
        label-position="right"
        :rules="rules"
      >
        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title" style="display: flex; align-items: center">
            <div class="text-overflow">明细信息</div>
          </div>
        </div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane
            label="服务"
            name="first"
          ></el-tab-pane>
        </el-tabs>
        <el-button
          icon="el-icon-plus"
          type="primary"
          size="small"
          style="margin-left: 10px"
          @click="addTable(activeName)"
          >添加</el-button
        >
        <!-- 服务 -->
        <el-table
          ref="singleTable"
          :data="parameter.serviceDetailList"
          style="width: 100%"
          highlight-current-row
          :cell-style="{'text-align': 'center'}"
          :header-cell-style="{'text-align': 'center'}"
        >
          <el-table-column fixed type="index" width="55" label="序号" />
          <el-table-column label="服务名称" min-width="150" prop="matName">
            <template slot-scope="scope">
              <el-input
                clearable
                v-model="scope.row.matName"
                placeholder="服务名称"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="服务内容" min-width="150" prop="matOtherExt">
            <template slot-scope="scope">
              <el-input
                clearable
                v-model="scope.row.matOtherExt"
                placeholder="请输入服务内容"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="服务范围" min-width="170" prop="matBaseExt">
            <template slot-scope="scope">
              <el-input
                clearable
                v-model="scope.row.matBaseExt"
                placeholder="服务范围"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="开始时间"
            min-width="150"
            prop="serviceStartTime"
          >
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.serviceStartTime"
                type="date"
                placeholder="开始时间"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                style="width: 100%"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            label="结束时间"
            min-width="150"
            prop="serviceEndTime"
          >
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.serviceEndTime"
                type="date"
                placeholder="结束时间"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                style="width: 100%"
              >
              </el-date-picker>
            </template>
          </el-table-column>

          <el-table-column label="预估金额(万元)" min-width="150" prop="amount">
            <template slot-scope="scope">
              <el-input
                clearable
                type="Number"
                v-model="scope.row.amount"
                placeholder="预估金额(万元)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="备注" min-width="150" prop="remark">
            <template slot-scope="scope">
              <el-input
                clearable
                type="textarea"
                v-model="scope.row.remark"
                placeholder="备注"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="right"
            width="90px"
            label="操作"
            :index="999"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                circle
                icon="el-icon-close"
                @click="delTable(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form>

    </div>
    <div slot="footer" class="footer">
      <el-button @click="handleClose">{{ $t('domestic.cancel') }}</el-button>
      <el-button type="primary" :loading="saveing" @click="handleSave">{{
        $t('domestic.save')
      }}</el-button>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb/index.vue'
// import purchaseMaterial from './purchaseMaterial.vue'
import {mapState} from 'vuex'
export default {
  name: 'domesticDialog',
  components: {
    Breadcrumb,
  },
  props: {
    editData: Object,
  },
  data() {
    return {
      importData: {
        title: '物料导入',
        templateName: '物料导入模板.xls',
        downloadUrl: '/../fvue/static/excel/material.xlsx',
        importUrl: window.context.portal + '/biz/Gs/v1/importExcelData',
        showProject: true,
        header: '物料导入',
      },
      activeName: 'first',
      breadcrumbOpt: [{breadcrumbName: '服务项目'}, {breadcrumbName: '新增'}],
      saveing: false,
      flexAuto: true,
      methodUnitsList: [],
      dataList: [],
      qualificationList: [],
      rules: {
        projectName: [
          {
            required: true,
            message: '请输入项目名称',
            trigger: 'blur',
          },
        ],
        year: [
          {
            required: true,
            message: '请选择所属年度',
            trigger: 'blur',
          },
        ],
        projectCode: [
          {
            required: true,
            message: '请输入项目编号',
            trigger: 'blur',
          },
        ],
        purchasingOrgName: [
          {
            required: true,
            message: '请输入采购单位',
            trigger: 'blur',
          },
        ],
        projectUserName: [
          {
            required: true,
            message: '请输入项目负责人',
            trigger: 'blur',
          },
        ],
        constructionStartTime: [
          {
            required: true,
            message: '请选择建设开始时间',
            trigger: 'blur',
          },
        ],
        investment: [
          {
            required: true,
            message: '请输入总投资',
            trigger: 'blur',
          },
        ],
        projectUserMobile: [
          {
            required: true,
            message: '请输入联系电话',
            trigger: 'blur',
          },
        ],
      },
      procurementMethod: '',
      parameter: {
        purchasingOrgName: '',
        purchasingOrgCode: '',
        purchasingOrgId: '',
        year: '',
        projectCode: '',
        projectType: '1',
        constructionStartTime: '',
        constructionCompletionTime: '',
        serviceDetailList: [],
        equipmentDetailList: [],
        engineeringDetailList: [],
        status: '1',
        accessoryList: [],
        projectUserName: '',
        projectUserMobile: '',
      },
      // 结束时间限制
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.parameter.constructionStartTime
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime()
          }
        },
      },
      basicInfo: {
        // 创建时间 此时间可以通过后端接口取服务器时间 或者 用 new Date().getTime()
        createDate: new Date().getTime(),
      },
    }
  },
  computed: {
    ...mapState({
      headers: (state) => {
        return {Authorization: `Bearer ${state.login.currentUser.token}`}
      },
      action: function () {
        return window.context.portal + '/biz/universal/v1/minioUpload'
      },
    }),
  },
  created() {
    this.addModifyBtn()
    this.currentUser = JSON.parse(sessionStorage.getItem('currentUserDetail'))
    this.parameter.purchasingOrgName = this.currentUser.org[0].orgName
    this.parameter.purchasingOrgCode = this.currentUser.org[0].orgCode
    this.parameter.purchasingOrgId = this.currentUser.org[0].orgId
    this.parameter.projectUserName = this.currentUser.user.fullname
    this.parameter.projectUserMobile = this.currentUser.user.mobile
    let moment = require('moment')
    this.parameter.year = moment().format('YYYY')
    this.parameter.constructionStartTime = moment().format('YYYY-MM-DD')
    this.parameter.constructionCompletionTime = moment().format('YYYY-MM-DD')
    if (this.breadcrumbOpt[1].breadcrumbName == '新增') {
      this.$http
        .get('${portal}/sys/identity/v1/getNextIdByAlias?alias=xmxx_xmbh')
        .then((res) => {
          console.log(res, 'ressssss')
          if (res.data.state) {
            this.parameter.projectCode = res.data.value
          } else {
            this.parameter.projectCode = ''
          }
        })
    }
  },
  mounted() {},
  methods: {
    handleClick() {},
    //添加明细
    addTable(val) {
      this.parameter.serviceDetailList.push({
          category: this.parameter.projectType,
          manufacturer: '',
          matBaseExt: '',
          matBrand: '',
          matCompanyCode: '',
          matCompanyId: '',
          matCompanyName: '',
          matMaterial: '',
          matName: '',
          matNum:1,
          matOtherExt: '',
          matSpec: '',
          serviceEndTime: this.parameter.constructionCompletionTime,
          serviceStartTime: this.parameter.constructionStartTime,
          singleValuation: null,
          totalValuation: null,
          type: null,
          matUnit: '',
          amount: 0,
          key: new Date(),
        })
     
    },
    changeStartTime(val) {
      if (this.parameter.projectType == 1) {
        this.parameter.serviceDetailList.forEach((item) => {
          item.serviceStartTime = val
        })
      }
    },
    changeEndTime(val) {
      if (this.parameter.projectType == 1) {
        this.parameter.serviceDetailList.forEach((item) => {
          item.serviceEndTime = val
        })
      }
    },
    //列表删除行
    delTable(index, row) {
      this.parameter.serviceDetailList.splice(index, 1)
    },
    handleOver() {
      this.flexAuto = !this.flexAuto
    },
    // 选择采购方式
    changeMethod(val) {
      this.procurementMethod = val
    },
    //编辑
    addModifyBtn() {
      if (this.$route.query.editRows) {
        this.breadcrumbOpt[1].breadcrumbName = '编辑'
        this.modifychoData(this.$route.query.editRows)
      } else {
        this.breadcrumbOpt[1].breadcrumbName = '新增'
      }
    },
    changeAmount(val) {
      console.log(val, 'val')
      val.amount =
        Number(val.equipmentProcurement) +
        Number(val.otherExpenses) +
        Number(val.equipmentProcurement)
    },
    //获取修改回显数据
    modifychoData(val) {
      this.$http
        .post('${portal}/projectLedger/v1/getDataById?id=' + val.id)
        .then((res) => {
          console.log(res, 'reas')
          if (res.data.state) {
            this.parameter = res.data.value
            if (this.parameter.accessoryList.length != 0) {
              this.dataList = this.parameter.accessoryList
            }
          }
        })
    },
    // 关闭//面包屑点击
    handleClose() {
      if (this.breadcrumbOpt[1].breadcrumbName === '编辑') {
        this.$router.push({
          name: 'basicProject',
          params: {
            pageBean: this.$route.query.pageBean,
          },
        })
      } else {
        this.$router.push({
          name: 'basicProject',
        })
      }
      this.parameter = {}
    },
    // 保存
    handleSave() {
      if (this.parameter.serviceDetailList) {
        this.parameter.serviceDetailList.forEach((item) => {
          if (item.id) {
            delete item.id
          }
        })
      }
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          this.saveing = true
          this.$http
            .post('${portal}/projectLedger/v1/saveOrUpdate', this.parameter)
            .then((res) => {
              this.saveing = false
              if (res.data.state) {
                this.$message.success(res.data.message)
                this.handleClose()
              }
            })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.auto {
  display: none;
}
.classNone {
  display: block;
}
.rows:first-of-type {
  cursor: pointer;
}
.rows {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 16px;
  padding: 10px 0;
  .rows-left {
    margin-right: 10px;
    .rows-hr {
      width: 3px;
      height: 18px;
      background-color: #0e6eff;
      border-radius: 2px;
    }
  }
  .rows-title {
    .text-overflow {
      width: 100%;
      font-size: 16px;
    }
  }
}
/deep/.el-tabs__item {
  font-size: 16px;
}
.auto {
  display: none;
}
.classNone {
  display: block;
}
/deep/.el-tabs__header {
  padding: 0px;
}
</style>
