<template>
  <div class="subPage" :style="{ padding: '20px' }">
    <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" :style="{ width: '600px' }">
      <el-form-item label="案场" prop="CaseId">
        <el-select v-model="formData.CaseId" placeholder="请选择案场">
          <el-option
            v-for="item in cases"
            :key="item.CaseId"
            :label="item.CaseName"
            :value="item.CaseId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图片" prop="BookTypeImg">
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :on-success="uploadSuccess"
          :before-upload="toolClass.beforeUpload"
          :http-request="toolClass.upload"
        >
          <img v-if="formData.BookTypeImg" :src="formData.BookTypeImg + '?x-oss-process=style/compress-rotate'" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="名称" prop="BookTypeName">
        <el-input v-model="formData.BookTypeName" :style="{ width: '200px' }"></el-input>
      </el-form-item>
      <el-form-item :style="{ paddingTop: '40px' }">
        <el-button type="primary" @click="submit()">保存</el-button>
        <el-button @click="$router.back()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex'

const {
  mapState: mapLibSate,
  mapActions,
  mapMutations
} = createNamespacedHelpers('library')

export default {
  name: 'bookType',
  data() {
    return {
      rules: {
        BookTypeName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        BookTypeImg: [{ required: true, message: '请上传图片', trigger: 'change' }],
        CaseId: [{ required: true, message: '请选择一个案场', trigger: 'change' }]
      },
      formData: {},
    }
  },
  created() {
    const id = this.$route.params.id
    if (id) {
      this.getInfo({ id }).catch(err => {
        this.$message({
          showClose: true,
          message: err,
          type: 'error'
        })
      })
    }
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCase: x => x.app.cases.default,
      orgid: x => x.app.user.OrgId
    }),
    ...mapLibSate({
      detail: s => s.type.detail,
    }),
  },
  watch: {
    detail: {
      handler (nv, ov) {
        if (nv.BookTypeId === this.formData.BookTypeId) {
          return
        }

        let CaseId = nv.CaseId
        if (!CaseId) {
          CaseId = this.defaultCase
        }

        this.formData = { ...nv, CaseId }
        // this.mergeDetail(nv)
      },
      immediate: true,
    },
    // formData: {
    //   handler (nv) {
    //     this.mergeDetail(nv)
    //   },
    //   deep: true,
    // },
  },
  methods: {
    ...mapMutations({
      mergeDetail: 'mergeTypeDetail'
    }),
    ...mapActions({
      getInfo: 'getTypeDetail',
      updateDetail: 'updateTypeDetail'
    }),

    uploadSuccess(res) {
      this.$set(this.formData, 'BookTypeImg', res.result.url)
      // this.formData.BookTypeImg = res.result.url
    },

    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.updateDetail(this.formData)
            .then(() => {
              this.$message({
                showClose: true,
                message: '更新或编辑分类成功',
                type: 'success'
              })
            })
            .catch(err => {
              this.$message({
                showClose: true,
                message: err,
                type: 'error'
              })
            })
        } else {
          this.$message({
            showClose: true,
            message: '表单填写错误',
            type: 'error'
          })
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
