<template>
  <el-form
    ref="ruleForm"
    :loading="loading"
    :model="ruleForm"
    status-icon
    :size="'mini'"
    :rules="rules"
    label-width="100px"
    style="width: 100%"
    class="demo-ruleForm"
  >
    <el-row>
      <el-col :span="6"
        ><el-form-item label="审核状态" prop="status">
          <el-select
            v-model="ruleForm.status"
            placeholder="请选择审核状态"
            style="width: 100%"
            :size="'mini'"
            :disabled="!(status == '2' && ppowers.some((i) => i == '2'))"
            @change="statusChange"
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" v-show="ruleForm.status === '1' && is_receive === '1'">
        <el-form-item label="物流费承担方" prop="is_th" label-width="110px">
          <el-select
            v-model="ruleForm.is_th"
            style="width: 100%"
            :disabled="!(status == '2' && ppowers.some((i) => i == '2'))"
            placeholder="是否承担物流费"
            :size="'mini'"
          >
            <el-option
              v-for="item in is_th_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" v-show="ruleForm.status === '1' && is_receive === '1'">
        <el-form-item label="退回至" prop="return_tag">
          <el-select
            v-model="ruleForm.return_tag"
            style="width: 100%"
            :disabled="!(status == '2' && ppowers.some((i) => i == '2'))"
            placeholder="是否承担物流费"
            :size="'mini'"
          >
            <el-option
              v-for="item in return_tag_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-show="ruleForm.status === '0'">
        <el-form-item
          label="审核备注"
          :disabled="!(status == '2' && ppowers.some((i) => i == '2'))"
          prop="remark"
        >
          <el-input
            type="textarea"
            :size="'mini'"
            placeholder="请输入审核备注"
            v-model="ruleForm.remark"
            :disabled="disabled"
            maxlength="250"
            :autosize="{ minRows: 2, maxRows: 2 }"
            show-word-limit
          />
        </el-form-item>
      </el-col>
      <el-col :span="6" v-if="status == '2' && ppowers.some((i) => i == '2')" class="tr">
        <el-button v-if="!isDetail" :size="'mini'" type="primary" @click="submitForm"
          >保 存
        </el-button>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import asyncRequest from "@/apis/service/sellOut/sellAfterApply";
import resToken from "@/mixins/resToken";
export default {
  name: "sellAfterApplyDetail",
  mixins: [resToken],
  props: ["id", "newTime", "sitem", "show"],
  data() {
    return {
      loading: false,
      is_receive: "1",
      status: "",
      statusList: [
        {
          value: "1",
          label: "通过",
        },
        {
          value: "0",
          label: "驳回",
        },
      ],
      is_th_list: [
        {
          value: "1",
          label: "收货人承担",
        },
        {
          value: "2",
          label: "业务公司承担",
        },
        {
          value: "3",
          label: "供应商承担",
        },
      ],
      return_tag_options: [
        {
          value: "1",
          label: "供应商仓库",
        },
        {
          value: "2",
          label: "业务公司仓库",
        },
      ],

      showModelThis: this.showModel,
      ruleForm: {
        status: "1", // 通过or驳回
        is_th: "1", //驳回至
        return_tag: "1",
        remark: "",
      },
      rulesThis: this.rules,
      rules: {
        status: [
          {
            required: true,
            message: "请选择审核状态",
            trigger: "change",
          },
        ],
        is_th: [
          {
            required: true,
            message: "请选择物流费承担方",
            trigger: "change",
          },
        ],
        return_tag: [
          {
            required: true,
            message: "请选择退回位置",
            trigger: "change",
          },
        ],
        remark: [
          { required: true, message: "请输入审核备注", trigger: "blur" },
          {
            min: 1,
            max: 250,
            message: "长度在 1 到 250 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    powers() {
      const tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "sellAfterApplyDetail"
        ) || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
    ppowers() {
      const tran =
        this.$store.getters.roleProcess.find((i) => i.process_type === "SHD") || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  watch: {
    newTime: function (val) {
      if (val) {
        this.initForm();
      }
    },
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.loading = true;
      this.rulesThis = this.rules;
      await this.resetForm();
      this.statusChange();
      this.loading = false;
    },

    statusChange() {
      this.rulesThis.is_th[0].required =
        this.ruleForm.status === "1" && this.is_receive === "1";
      this.rulesThis.remark[0].required = this.ruleForm.status !== "1";
    },
    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          const {
            returnCode,
            is_receive,
            status,
            return_tag,
            is_th,
            remark,
          } = this.sitem;
          this.status = status || "";
          this.is_receive = is_receive || "1";
          this.ruleForm = {
            status: "1", // 通过or驳回
            is_th: is_th || "1", //驳回至
            return_tag: return_tag || "1",
            remark: remark || "",
            returnCode: returnCode || "",
          };
        }
      });
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          let model = JSON.parse(JSON.stringify(this.ruleForm));
          model.status = model.status === "1" ? "3" : "6";
          model.is_th = this.is_receive === "0" ? "0" : model.is_th;
          model.return_tag = this.is_receive === "0" ? "0" : model.return_tag;
          model.is_post = "0";
          console.log(model);
          let res = await asyncRequest.status(model);
          this.loading = false;
          if (res && res.code === 0) {
            this.$notify.success({
              title: "提交成功！",
              message: "",
            });
            this.$emit("refresh");
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

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