<template>
  <div class="purchaser-popup-warp">
    <el-dialog v-model="isShow" title="采购报价" width="800" :before-close="doCancel">
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="auto" class="custom-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品分类" prop="typeId">
              <el-cascader v-model="ruleForm.typeId" :options="treeList" :props="treeOption" clearable :placeholder="'请选择分类'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收购价格" prop="price">
              <el-input-number v-model="ruleForm.price" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购商品" prop="goods">
              <el-input v-model="ruleForm.goods" style="width: 200px" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="收购数量" prop="num">
              <el-input-number v-model="ruleForm.num" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货地址" prop="addr">
              <el-input v-model="ruleForm.addr" :rows="2" type="textarea" :placeholder="'收货地址'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label=" " prop="isPickup">
              <el-radio-group v-model="ruleForm.isPickup">
                <el-radio v-for="(n, index) in pickupOptions" :key="index" :value="n.value">{{ n.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购说明" prop="remark">
              <el-input v-model="ruleForm.remark" :rows="2" type="textarea" :placeholder="'采购说明'" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="doCancel">取消</el-button>
          <el-button type="primary" @click="doSure"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
import { fa } from 'element-plus/es/locale/index.mjs';
const route = useRoute();
const router = useRouter();

const props = defineProps({
  list: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

let treeList = reactive([]);
let ruleForm = reactive({
  typeId: '',
  price: '',
  goods: '',
  num: '',
  addr: '',
  isPickup: 1,
  remark: '',
});

const pickupOptions = reactive([
  { label: '可上门收货', value: 1 },
  { label: '不上门收货', value: 0 },
]);

let ruleFormRef = ref(null);
const treeOption = ref({
  children: 'children',
  label: 'title',
});

watch(
  () => props.list,
  () => {
    treeList = props.list;
  },
  {
    immediate: true,
  }
);
let isShow = ref(false);
const doShow = () => {
  isShow.value = true;
};

const doHide = () => {
  isShow.value = false;
};

const doCancel = () => {
  doHide();
};

const doSure = () => {
  doHide();
};

const rules = reactive({
  typeId: [{ required: true, message: '请选择商品分类', trigger: ['blur', 'change'] }],
  price: [{ required: true, message: '请输入采购价格', trigger: ['blur', 'change'] }],
  goods: [{ required: true, message: '请输入采购商品', trigger: ['blur', 'change'] }],
  num: [{ required: true, message: '请输入采购数量', trigger: ['blur', 'change'] }],
  addr: [{ required: true, message: '请填入详细地址', trigger: ['blur', 'change'] }],
  isPickup: [{ required: true, message: '请选择是否上门取货', trigger: ['blur', 'change'] }],
  remark: [{ required: false, message: '请输入补充说明', trigger: ['blur', 'change'] }],
});

defineExpose({
  doShow,
  doHide,
});
</script>
<style lang="scss" scoped>
.purchaser-popup-warp {
}
.custom-form {
  ::v-deep() {
    .el-form-item__label {
      font-size: 18px !important;
      font-weight: 400 !important;
      color: $color-999 !important;
    }
    .el-radio__label {
      font-size: 18px;
      color: $color-333;
    }
  }
}
</style>
