<template>
  <div class="creator">
    <div class="creator__body">
      <el-form
        class="creator__info creator__info--base"
        inline
        label-position="top"
        :model="formData"
        ref="form"
        :rules="rules"
        :disabled="mode === 'detail'"
      >
        <el-collapse v-model="activeNames">
          <el-collapse-item title="关键信息" name="1">
            <el-form-item label="业务单号">
              <el-input v-model="formData.businessNo" disabled></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formData.status" disabled>
                <template v-for="item in $keys.inventory.insideBusiness.status">
                  <el-option :key="item.id" :value="item.key" :label="item.name"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="业务类型" prop="businessType">
              <el-select v-model="formData.businessType" @change="typeChange">
                <template v-for="item in $keys.inventory.insideBusiness.businessType">
                  <el-option :key="item.id" :value="item.key" :label="item.name"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="货主" prop="ownerCode">
              <PublicQuery
                single
                title="货主"
                cfgKey="invWmsCustomer"
                :disabled="(detailData.status !== '00') && mode !== 'create'"
                :baseUrl="baseUrl"
                :valueField.sync="formData.ownerCode"
                :textField.sync="formData.ownerName"
              ></PublicQuery>
            </el-form-item>
            <el-form-item label="审核状态">
              <el-select v-model="formData.auditStatus" disabled>
                <template v-for="item in $keys.common.auditStatus">
                  <el-option :key="item.id" :value="item.key" :label="item.name"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="审核时间">
              <el-date-picker
                disabled
                type="datetime"
                v-model="formData.auditTime"
                value-format="yyyy-MM-dd HH:mm:00"
                format="yyyy-MM-dd HH:mm"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="审核人">
              <el-input v-model="formData.auditOpCn" disabled></el-input>
            </el-form-item>
            <!--<el-form-item label="审核意见">-->
              <!--<el-input v-model="formData.auditComment"></el-input>-->
            <!--</el-form-item>-->
          </el-collapse-item>
        </el-collapse>
      </el-form>
      <div class="creator__info creator__info--senior">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="业务明细" name="2">
            <DetailList
              :mode="mode"
              :formData="formData"
              :willAddDetail="willAddDetail"
              :selectedType="selectedType"
            ></DetailList>
          </el-collapse-item>
        </el-collapse>
      </div>
      <!--<div class="creator__info creator__info&#45;&#45;operation" v-if="mode === 'detail'">-->
        <!--<el-collapse v-model="activeNames">-->
          <!--<el-collapse-item title="操作信息" name="4">-->
            <!--<div class="operation-info">-->
              <!--<el-col :span="6">创建人登录名: {{operationInfo.creatorLoginName}} ({{operationInfo.creatorUserNameCn}})</el-col>-->
              <!--<el-col :span="6">创建时间: {{detailData.createTime}}</el-col>-->
              <!--<el-col :span="6">修改人登录名: {{operationInfo.modifierLoginName}} ({{operationInfo.modifierUserNameCn}})</el-col>-->
              <!--<el-col :span="6">修改时间: {{detailData.modifyTime}}</el-col>-->
            <!--</div>-->
          <!--</el-collapse-item>-->
        <!--</el-collapse>-->
      <!--</div>-->
    </div>
    <div class="creator__foot" v-if="mode !== 'detail'">
      <el-button v-auth="50300030201" type="primary" @click="confirm">保存</el-button>
    </div>
  </div>
</template>

<script>
// import mixins from './mixins'
import routerMixins from '../../routerMixins'
import DetailList from './DetailList'

export default {
  mixins: [ routerMixins ],
  components: { DetailList },
  watch: {
    detailData: {
      immediate: true,
      handler (val) {
        if (this.mode !== 'create') {
          // 编辑模式可直接显示明细
          this.businessNo = val.businessNo
        }
        this.formData = { erpBusinessDetailBeanList: [], ...val }
      }
    },
    mode: {
      immediate: true,
      handler (val) {
        if (val === 'detail') {
          // this.getUserName()
        }
      },
    },
  },
  created () {
    this.mode = this.$route.params.mode || 'create'
    this.detailData = this.$route.params.detailData || {}
  },
  mounted () {
  },

  data () {
    return {
      mode: 'create', // 模式, 默认为新增模式
      detailData: {}, // 主页面传来的详情对象
      formData: {},
      activeNames: ['1', '2'],
      baseUrl: '/inv_web/invweb', // 多条件基础URL
      // 表单验证
      rules: {
        // formData写在 computed 就不能识别校验, 导致校验始终不通过
        ownerCode: [{ required: true, message: '必填', trigger: 'change' }],
        businessType: [{ required: true, message: '必选', trigger: 'change' }],
      },
      businessNo: '', // 移动明细单号
      operationInfo: {}, // 操作信息对象
      selectedType: {}, // 选到的业务类型对象
    }
  },
  methods: {
    // 关闭
    close () {
      this.$emit('close')
    },
    // 保存按钮
    confirm () {
      this.formData.erpBusinessDetailBeanList.map(item => {
        delete item.lineNo
      })
      this.$refs.form.validate(valid => {
        if (valid) {
          const url = this.$API.inventory.insideBusiness.create
          const param = { erpBusinessBean: JSON.stringify(this.formData) }
          this.$https.post(url, param)
            .then(data => {
              this.needRefresh = true
              // this.formData = { ...data.data }
              // this.showDetailList = true
              this.$router.back()
            })
        }
      })
    },
    // 获取操作信息
    getUserName () {
      const url = `${this.$API.getUserName}?creator=${this.detailData.creator}&modifier=${this.detailData.modifier}`
      this.$https.get(url)
        .then(data => {
          this.operationInfo = data.data
        })
    },
    // 选商品前校验
    beforeSelectSku () {
      if (!this.formData.ownerCode) {
        this.$message.error('请先选择货主')
      } else {
        return {
          queryParams: {
            ownerCodeParam: this.formData.ownerCode
          }
        }
      }
    },
    // 即将新增详情列表数据
    willAddDetail () {
      let result = false
      this.$refs.form.validate(valid => {
        result = valid
      })
      return result
    },

    // 业务类型变化
    typeChange (type) {
      this.selectedType = this.$keys.inventory.insideBusiness.businessType.find(item => item.key === type) || {}
      this.formData.erpBusinessDetailBeanList = []
    },
  },
}
</script>

<style lang="scss" scoped>
  .el-collapse-item {
    margin-bottom: 20px;
  }
  .creator {
    overflow-y: auto;
    height: 100%;
    &__info {
      margin-bottom: 20px;
    }
  }
  .creator__body {
    height: calc(100% - 50px); // 减去 bottom 的高度
    border-bottom: 1px solid #ddd;
    overflow-x: hidden;
  }
  .creator__foot {
    position: fixed;
    bottom: 20px;
  }
  .operation-info {
    text-align: center;
  }
</style>
