<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      :title="popupTitle"
      :async="true"
      width="800px"
      @confirm="handleSubmit"
      @close="handleClose"
      :button="mode == 'edit'"
      :clickModalClose="mode == 'details'"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="参股公司:">
              <div > {{ formData.company_b_name }}</div>
            </el-form-item>
          </el-col>
        </el-row> <el-row>
          <el-col :span="24">
            <el-form-item label="被参股公司:">
             <div > {{ formData.company_a_name }}</div>
            </el-form-item>
          </el-col>
        </el-row> <el-row>
          <el-col :span="24">
            <el-form-item label="金额:">
             <div  > {{ taskExtend.amount }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="完成凭证:">
             <div  v-if="taskExtend.file_type=='image'" > 
            
                <el-image
      style="width: 100px; height: 100px"
      :src="taskExtend.annex"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="[taskExtend.annex]"
      
      fit="cover"
    />
            
            
            
            
            
            </div>

             <div style="cursor: pointer;color:blue"   v-else @click="annexFn(taskExtend.annex)"> 查看凭证</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="12">
          <el-form-item
            label="审核"
            prop="check_status"
            clearable
            :style="{ width: '100%' }"
          >
            <el-radio-group
            :class="{disabled:mode == 'details'}"
              v-model="formData.check_status"
            >
              <el-radio :label="2">通过</el-radio>
              <el-radio :label="3">驳回</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-row>
          <el-col>
            <el-form-item label="备注" prop="remark">
              <el-input
                :readonly="mode == 'details'"
                v-model="formData.remark"
                clearable
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </popup>
  </div>
</template>
      
<script lang="ts" setup name="flowEdit">
import type { FormInstance } from "element-plus";
import Popup from "@/components/popup/index.vue";
import { apiApproveAudit } from "@/api/shareholdingReview";
import type { PropType } from "vue";
defineProps({
  dictData: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({}),
  },
});
const isCompany = ref(false);
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");

// 弹窗标题
const popupTitle = computed(() => {
  return mode.value == "edit" ? "审核" : "详情";
});
const annexFn=(href:string)=>{
  window.open(href, '_blank')
}
// 表单数据
const formData = reactive({
  id: "",
  check_status: 1,
  remark: "",
  company_a_name:"",
  company_b_name:"",
});

const taskExtend = reactive({
  amount: "",
  annex: "",
  file_type:"",
});

// 表单验证
const formRules = reactive<any>({
  check_status: [
    {
      required: true,
      validator: (rules: any, value: any, callback: any) => {
        if (value != 2 && value != 3) callback("请选择审核状态");
        else callback();
      },
      trigger: ["blur"],
    },
  ],
});
// 获取详情
const setFormData = async (data: Record<any, any>) => {


// console.log(data)
// return

formData.id=data.id
for ( let key in  taskExtend){
  //@ts-ignore
  taskExtend[key]=JSON.parse(data.extend)[key]
}
formData.company_a_name=data.company_a_name
  formData.company_b_name=data.company_b_name
if(mode.value=='details'){
  formData.check_status=data.check_status
  formData.remark=data.remark
 
}
};
// 提交按钮
const handleSubmit = async () => {
  await formRef.value?.validate();
  if (formData.check_status == 3 && formData.remark == "")
    return ElMessage.error("驳回必须填写备注");
  await apiApproveAudit({
    id: formData.id,
    check_status: formData.check_status,
    remark: formData.remark,
  });
  popupRef.value?.close();
  emit("success");
};

//打开弹窗
const open = (type = "add") => {
  mode.value = type;
  popupRef.value?.open();
};

// 关闭回调
const handleClose = () => {
  emit("close");
};

defineExpose({
  open,
  setFormData,
});
</script>
    
<style lang="scss" scoped>
:deep(.el-timeline-item__wrapper) {
  top: -8px !important;
}
.attachment {
  width: 150px;
  height: 150px;
  /* background-color: red; */
  margin-right: 10px;
  margin-bottom: 10px;
}
.video {
  width: 300px;
  height: 150px;
  /* background-color: red; */
  margin-right: 10px;
  margin-bottom: 10px;
}
.disabled{
  pointer-events: none;
  cursor: not-allowed;
}
</style>