<template>
  <el-dialog v-loading.fullscreen.lock="fullscreenLoading" :close-on-click-modal = "false"
              v-model="outerVisible" title="任务进度" width="765" height="800">
    <div v-if="!falg">
      <el-form v-if="recordStatu === 1 &&handlerId === useUserStore().user.userId" :rules="rules" :model="sumbitForm" label-width="auto" ref="workDetailForm" style="max-width: 700px;">
        <el-form-item label="记录日期" prop="recordDate">
          <el-date-picker v-model="sumbitForm.recordDate" type="date" clearable
                          format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                          style="width: 100%;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="进度描述"  prop="recordDetail">
          <el-input class="no-scrollbar" type="textarea" v-model="sumbitForm.recordDetail" />
        </el-form-item>
        <div style="display: flex;
    justify-content: flex-end;
    flex-direction: row;">
          <el-button  @click="formclear">清空</el-button>
          <el-button type="primary" @click="onSubmit">添加</el-button>
        </div>
      </el-form>
    </div>
    <br>
    <el-table
        ref="singleTableRef"
        :data="onworkDetailData"
        highlight-current-row
        style="width: 100%;"
        max-height="250"
        @current-change="handleCurrentChange"
    >
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column property="recordDate" label="记录日期" width="120" >
        <template #default="scope">
          <el-date-picker v-if="(recordStatu === 1 &&handlerId === useUserStore().user.userId)&& scope.row.inputHidden === 1" v-model="scope.row.recordDate" type="date" clearable size="small"
                          format="YYYY-MM-DD " value-format="YYYY-MM-DD"
                          :disabled="scope.row.inputdisabled"
                          style="width: 100%;">
          </el-date-picker>
          <div v-else>{{dateFormat(scope.row.recordDate)}}</div>
        </template>
      </el-table-column>
      <el-table-column property="recordDetail" label="进度描述" width="300" >
        <template #default="scope">

          <el-input type="textarea" v-if="(recordStatu === 1 &&handlerId === useUserStore().user.userId)&& scope.row.inputHidden === 1"  class="no-scrollbar" v-model="scope.row.recordDetail" :disabled="scope.row.inputdisabled"/>
          <div v-else>{{scope.row.recordDetail}}</div>
        </template>
      </el-table-column>
      <el-table-column property="userName" label="操作人" width="120" >
        <template #default="scope">
          {{scope.row.userName}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="150" >
        <template #default="scope">
          <el-button v-if="!falg &&recordStatu === 1 && handlerId === useUserStore().user.userId" :disabled="scope.row.disabled" size="small" type="primary"  @click="handleClick(scope.$index, scope.row,this)">
           {{scope.row.buttonName}}
          </el-button>
          <el-button v-if="!falg &&recordStatu === 1 && handlerId === useUserStore().user.userId" :disabled="scope.row.disabled" size="small" type="danger"  @click="handleClickDel(scope.$index, scope.row,this)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {ElButton, ElTable} from "element-plus";
import {ref} from "@vue/reactivity";
import modal from "@/plugins/modal"
import useUserStore from "@/store/modules/user";
import {computed, defineProps, getCurrentInstance, reactive, toRefs} from "vue";
import {
  getDetail,
  updateDetail,
  addDetail,
    delDetail
} from "@/api/business/onWorkDetail";
import moment from 'moment'
const outerVisible = ref(false);
const onworkDetailData = ref<TFrom[]>([]);
const currentRow = ref();
const fullscreenLoading = ref<boolean>(false);
const { proxy } = getCurrentInstance();
const inputHidden = ref(0);
const props = defineProps({
  getList: {
    type: Function,
    default: () => { },
  },
});
const { getList } = toRefs(props);
const form = reactive({
  buttonName: "修改",
  disabled: false,
  id: null,
  inputdisabled: false,
  recordDate: '',
  recordDetail: '',
  userName: '',
  workOrderId: null,
  inputHidden:0,
});
const rules = computed(() => ({
  recordDate: [
    {type:'date', required: true, message: "记录日期不能为空"},
  ],
  recordDetail: [
    { required: true, message: "进度描述不能为空"},
  ],
}));
type TFrom = typeof form;
const sumbitForm = reactive<TFrom>(form);
const workDetailForm = ref();
const workOrderId = ref();
const falg = ref<boolean>(true);
const singleTableRef = ref<InstanceType<typeof ElTable>>()
const setCurrent = (row?: any) => {
  singleTableRef.value!.setCurrentRow(row)
}
const handlerId = ref();
const recordStatu = ref();
const handleCurrentChange = (val: any | undefined) => {
  currentRow.value = val
}
//点击处理，每次点击都要改变状态默认状态时修改
const handleClick = (index: number, row: TFrom, ele: ElButton) => {
  row.inputHidden = 1;
  if(!row.inputdisabled){
    fullscreenLoading.value = true;
    updateDetail(row).then(res => {
      fullscreenLoading.value = false;
      row.inputdisabled = false;
      row.buttonName = '修改';
      restDetail();
      modal.msgSuccess("修改成功");
      row.inputHidden = 0;
      getList.value();
    }).catch((error)=>{
      fullscreenLoading.value = false;
    })
  }else{
    row.inputdisabled = false;
    row.buttonName = '确认';
  }
}
const handleClickDel = (index: number, row: TFrom, ele: ElButton) =>{
  delDetail(row.id).then(res => {
    modal.msgSuccess("删除成功");
    restDetail();
    getList.value();
  })
}
//重新获取数据
const restDetail = () =>{
  getDetail(workOrderId.value).then((res) => {
    onworkDetailData.value = res.rows;
    if(recordStatu.value === 1 && handlerId.value === useUserStore().user.userId){
      setButtonDisabled(false);
    }else{
      setButtonDisabled(true);
    }
    setFormDisabled(true);
  }).catch((error) => {
    console.log(error);
  })
}
//打开本弹窗的方法暴露给父组件
const openView = (id,userId,recordStatus,view) => {
  sumbitForm.recordDate = null;
  sumbitForm.recordDetail = null;
  workOrderId.value = id;
  outerVisible.value = true;
  handlerId.value = userId;
  recordStatu.value = recordStatus;
  falg.value = view;
  recordStatu.value = recordStatus;
  restDetail();
}
const setButtonDisabled = (falg:boolean)=>{
  onworkDetailData.value.forEach((value) => {
    value.disabled = falg;
  })
}
//设置属性
const setFormDisabled = (falg:boolean) => {
  onworkDetailData.value.forEach((value) => {

    value.inputdisabled = falg;
    if(falg){
      value.buttonName = '修改';
    }else{
      value.buttonName = '确认';
    }

  })
}
//表单清空
const formclear = () => {
  sumbitForm.recordDetail = '';
  sumbitForm.recordDate = '';
}

//这个提交是表单提交
const onSubmit = () =>{
  fullscreenLoading.value = true;
  sumbitForm.workOrderId = workOrderId;
  if(sumbitForm.recordDate != null && sumbitForm.recordDetail != null && sumbitForm.recordDetail !== ''){
    addDetail(sumbitForm).then((response) => {
      sumbitForm.recordDetail = null;
      sumbitForm.recordDate = null;
      restDetail();
      fullscreenLoading.value = false;
      getList.value();
    }).catch((error) => {
      console.log(error);
      fullscreenLoading.value = false;
    })
  }else{
    proxy.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
        "请填写记录日期和进度描述" +
        "</div>"
        ,
        { dangerouslyUseHTMLString: true }
    );
  }
}
const dateFormat = (date)=>{
  return moment(date).format("YYYY-MM-DD");
}
defineExpose({
  openView,
});
</script>
<style>
.clearButton>.el-form-item__content{
  flex:none !important;
}
.no-scrollbar ::-webkit-scrollbar {
  display: none; /* 针对WebKit浏览器 */
}

.no-scrollbar {
  .el-textarea__inner{
    min-height: 100px !important;
  }
  -ms-overflow-style: none;  /* 针对IE、Edge浏览器 */
  scrollbar-width: none;  /* 针对火狐浏览器 */
}
</style>