<template>
  <div class="bigBox">
    <MOSTY.FromPage :title="'食物留样详情'" @closeDialog="CloseEvent">
      <template #content>
        <div class="frombox" ref="frombox">
          <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="150px" :model="data.fromObj" :inline="true"
            label-suffix="：" :rules="rules" :disabled="!saveBtnShow">
            <!-- <el-form-item label="所属场所" prop="placename">
              <el-input v-model="data.fromObj.placename" clearable style="width: 337px" />
            </el-form-item> -->
            <el-form-item label="所属单位" prop="orgname">
              <el-input v-model="data.fromObj.orgname" clearable style="width: 337px" :disabled="true" />
            </el-form-item>
            <!-- <el-form-item label="监督人">
              <el-input v-model="data.fromObj.jdrxm" clearable style="width: 337px" />
            </el-form-item> -->
            <el-form-item label="餐次" prop="type">
              <el-select v-model="data.fromObj.type" clearable placeholder="请选择餐次：" style="width: 337px">
                <el-option v-for="item in D_TB_STLYLB" :key="item" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="留样人" prop="sampleusername">
              <el-input v-model="data.fromObj.sampleusername" clearable style="width: 337px" />
            </el-form-item>
            <el-form-item label="留样时间">
              <el-date-picker v-model="data.fromObj.sampletime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss" style="width: 337px" :disabled="true" />
            </el-form-item>
            <el-form-item label="是否销毁:">
              <el-select v-model="data.fromObj.sfxh" placeholder="请选择" style="width: 337px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="菜品名称:">
              <el-input v-model="data.fromObj.foodname" clearable style="width: 337px" />
            </el-form-item> -->
            <el-form-item label="备注:" style="width: 100%">
              <el-input type="textarea" rows="3" v-model="data.fromObj.bz" clearable style="width: 100%" />
            </el-form-item>
            <el-form-item label="留样照片:" style='width:100%;' prop="pics">
              <MOSTY.Upload :width="'100%'" :limit="5" :nopicer="false" :isImg="true" :ShowfileList="false"
                v-model="data.fromObj.pics" :nameshow='true' :gsgfList="['jpg', 'png']" @filehandleChange="changeFiles">
              </MOSTY.Upload>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button v-if="props.saveBtnShow" type="primary" @click="submit(ruleFormRef)" v-loading='saveloading'>
          <el-icon>
            <DocumentChecked />
          </el-icon>保存
        </el-button>
        <el-button type="primary" @click="CloseEvent">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </template>
    </MOSTY.FromPage>

  </div>
</template>

<script setup>
import {
  onMounted,
  defineProps,
  defineEmits,
  reactive,
  watchEffect,
  ref,
  getCurrentInstance
} from "vue";
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  },
  title: String,
  saveBtnShow: {
    default: true,
    type: Boolean
  }
});
const ruleFormRef = ref();
const { D_TB_STLYLB } = proxy.$dict("D_TB_STLYLB");
const rules = reactive({
  orgname: [{ required: true, message: "所属单位不能为空", trigger: "blur" }],
  type: [{ required: true, message: "餐次不能为空", trigger: "blur" }],
  sampleusername: [{ required: true, message: "留样人不能为空", trigger: "blur" }],
  sampletime: [{ required: true, message: "留样时间不能为空", trigger: "blur" }],
  pics: [{ required: true, message: "留样照片不能为空", trigger: "blur" }]
});
const options = [
  {
    value: '0',
    label: '未销毁',
  },
  {
    value: '1',
    label: '已销毁',
  },

]
const emits = defineEmits(["close"]);
const data = reactive({
  fromObj: {},
  url: ""
});
const CloseEvent = () => {
  emits("close");
};
onMounted(() => {
  if (props.editObj.id) {
    getmain(props.editObj.id)
  } else {
    data.fromObj = {};
  }
  data.fromObj.stid = props.editObj.stid
  data.fromObj.orgname = props.editObj.orgName
});

const getmain = (id) => {
  if (id) {
    getApi({}, "/mosty-jcgl/canteenSample/queryCanteenSampleById?id=" + id).then(
      async (res) => {
        if (res) {
          data.fromObj = res;
          if (data.fromObj.tbSampleFoodList && data.fromObj.tbSampleFoodList.length > 0) {
            data.fromObj.foodname = data.fromObj.tbSampleFoodList[0].foodname
          }
          // 图片
          let imgId = res.pics;
          if (imgId) {
            let imgArr = imgId.split(',')
            let imgs = []
            for (let i = 0; i < imgArr.length; i++) {
              let img = imgArr[i]
              let url = await new Promise(async ok => {
                await getApi({}, `/mosty-base/minio/file/download/${img}`).then((res) => {
                  if (res && res.url) {
                    ok(res.url)
                  } else {
                    ok('')
                  }
                })
              })
              imgs.push(url)
            }
            data.fromObj.url = imgs
          }
        }
      }
    );
  }
};
const saveloading = ref(false)
// 保存
const submit = async (ruleFormRef) => {
  saveloading.value = true
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      data.fromObj.pics = data.fromObj.pics ? data.fromObj.pics.toString() : null
      const params = { ...data.fromObj }
      postApi(params, "/mosty-jcgl/canteenSample/addCanteenSampleOne")
        .then((res) => {
          ElMessage.success("新增成功");
          emits("close");
        }).finally(() => {
          saveloading.value = false
        })
    } else {
      ElMessage.error("请输入必填项!");
      saveloading.value = false
    }
  });
};
</script>

<style lang="scss" scoped>
.el-image {
  border: 1px solid (220, 222, 224);
  background-color: rgb(220, 222, 224);
  padding: 5px;
  margin-left: 5px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
}


.frombox {
  width: 100%;
  margin: 20px;
}


.el-form {
  width: 90%;
  margin: 20px 30px;
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.el-form-item {
  display: flex;
  margin-right: 20px;
}

.addbtn {
  margin-bottom: 10px;
}

.bigBox {
  display: block !important;
  box-sizing: border-box;
}

.tabbox {
  max-height: 300px;
  overflow-y: scroll;

  .input {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}

::v-deep .el-upload-list {
  width: 50%;
}

.img_fix {
  width: 915px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
</style>