<template>
  <div>
    <el-card :body-style="cardBodyStyle">
      <el-form inline>
        <el-row :span="24">
<!--          <el-col :span="5">-->
<!--            <el-form-item label="类别" prop="leibiemc">-->
<!--              <el-select v-model="query.materName" placeholder="请选择类别" clearable style="width: 200px;">-->
<!--                <el-option v-for="item in typeList" :key="item.itemCd" :label="item.itemNm"-->
<!--                           :value="item.itemNm"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="5">
            <el-form-item label="委托编号" prop="id">
              <el-input v-model="query.id" placeholder="请输入委托编号" clearable style="width: 200px;"/>
            </el-form-item>
          </el-col>
        </el-row>
        <!--     <el-col :span="5">
                <el-form-item label="厂家" prop="factName">
                    <el-input placeholder="请输入厂家" v-model="query.factName" style="width: 200px;"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="运输方式" prop="yunshufs">
                    <el-select v-model="query.yunshufs" placeholder="请选择运输方式" clearable style="width: 200px;">
                        <el-option label="火车" value="火车"></el-option>
                        <el-option label="汽车" value="汽车"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click="show" link>
                    高级查询
                    <el-icon v-if="showA">
                        <ArrowUp />
                    </el-icon>
                    <el-icon v-else>
                        <ArrowDown />
                    </el-icon>
                </el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click="reset" link>重置</el-button>
            </el-col>
        </el-row>
        <el-row :span="24" v-if="showA">
            <el-col :span="5">
                <el-form-item label="是否组批" prop="zpEndFlag">
                    <el-select v-model="query.zpSts" placeholder="请选择是否组批" clearable style="width: 200px;">
                            <el-option label="未组批" value="0"></el-option>
                            <el-option label="已组批" value="1"></el-option>
                            <el-option label="拆批" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="车号" prop="carNo">
                    <el-input placeholder="请输入车号" v-model="query.carNo" style="width: 200px;"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="船号" prop="shipNo">
                    <el-input placeholder="请输入船号" v-model="query.shipNo" style="width: 200px;"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="计量号" prop="jlNo">
                    <el-input placeholder="请输入计量号" v-model="query.jlNo" style="width: 200px;"></el-input>
                </el-form-item>
            </el-col>

        </el-row>
        <el-row :span="24" v-if="showA">
            <el-col :span="5">
                <el-form-item label="批次" prop="lotNumber">
                    <el-input placeholder="批次" v-model="query.lotNumber" style="width: 200px;"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="委托编号" prop="id">
                    <el-input placeholder="请输入委托编号" v-model="query.id" style="width: 200px;"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="组批号" prop="zpNo">
                    <el-input placeholder="请输入组批号" v-model="query.zpNo" style="width: 200px;"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="合同号" prop="contractNo">
                    <el-input placeholder="请输入合同号" v-model="query.contractNo" style="width: 200px;"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :span="24" v-if="showA">
            <el-col :span="5">
                <el-form-item label="计量时间" prop="jlTime">
                    <el-date-picker v-model="query.jlTime" type="datetimerange" align="right" unlink-panels
                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                        style="width: 430px;" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
            </el-col>
        </el-row> -->
      </el-form>
    </el-card>
    <ButtonBar area="top" @search="handleSearch"></ButtonBar>
    <el-card :body-style="cardBodyStyle">
      <el-table :data="tableData" border highlight-current-row @row-click="handleClick"
                @selection-change="handleSelectionChange">

        <el-table-column v-if="true" prop="id" label="委托编号" width="160" header-align="center" align="center"
                         show-overflow-tooltip fixed>
        </el-table-column>

        <el-table-column v-if="true" prop="chuangjianname" label="创建人" width="200" header-align="center"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>

        <el-table-column v-if="true" prop="quyangbh" label="取样编号" width="200" header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="wulizybh" label="物理制样编号" width="200" header-align="center"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="huaxuezybh" label="化学制样编号" width="200" header-align="center"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>

        <el-table-column v-if="true" prop="weituoztMc" label="委托状态" width="200" header-align="center" align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column v-if="true" prop="chuangjiansj" label="创建时间" width="200" header-align="center"
                         align="center"
                         show-overflow-tooltip fixed="right">
        </el-table-column>
      </el-table>
    </el-card>
    <el-card :body-style="cardBodyStyle">
      <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
                     background="background" layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
    <el-card v-if="weituoId!==''" style="height: 250px" :body-style="cardBodyStyle">
      <el-steps style="max-width: 1600px; margin-top: 75px;" :active=active align-center finish-status="success">
        <el-tooltip
            v-for="(step, index) in steps"
            :key="index"
            placement="top"
            :disabled="(index > active)"
            show-after="100"
        >
          <template #content>
            <div>
              <p>步骤信息 : {{ step.title }}</p>
              <p>操作时间 : {{ ztTime.caozuosj || "当前步骤被跳过，暂无数据" }}</p>
            </div>
          </template>
          <el-step
              :title="step.title"
              @mouseenter="handleStepHover(index)"
          />
        </el-tooltip>

      </el-steps>

    </el-card>
  </div>
</template>

<script setup>
import ButtonBar from "@/components/ButtonBar.vue";
import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance,

} from 'vue'
import style from '@/tools/style'
import {ElMessage, ElMessageBox} from "element-plus";
import {ArrowDown} from "@element-plus/icons-vue";
import response from "qrcode/lib/core/byte-data.js";
import {nextTick} from "vue";


onMounted(() => {
  queryGS()
  queryType()
  handleSearch()
})


const steps = ref([
  {title: "委托创建"},
  {title: "委托提交"},
  {title: "取样完成"},
  {title: "制样接样"},
  {title: "制样完成"},
  {title: "等待各站审核"},
  {title: "物理审核完成"},
  {title: "化学审核完成"},
  {title: "等待综合科审核"},
  {title: "审核完成"},
  {title: "上传MES"},
]);

const ztTime = ref([])
const activeDetailIndex = ref(-1); // 当前显示详细信息的步骤索引
const disabled = ref(true)
// 处理点击步骤事件

const handleStepHover = (index) => {
  if (index > active.value) {
    return;
  }

  const url = "sci/YPJD/queryZtTime";
  const params = {
    weituoId: weituoId.value,
    caozuonr: steps.value[index].title,
  };

  proxy.$axios.get(url, params).then((response) => {
    if (response.data.code == "0") {
      ztTime.value=[]
      ztTime.value = response.data.data;
    } else {
      ElMessage.error("获取数据失败！" + response.data.msg);
    }
  });
};



const active = ref(-1)

const tableZt = ref([])
const getTableZt = async (id) => {
  var url = 'sci/Weituogl/queryTableZt'
  var param = {
    id: id
  }
  await proxy.$axios.get(url, param).then(resp => {
    if (resp.data.code == '0') {
      tableZt.value = resp.data.data
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}

const weituoId = ref('')

//单击一行数据进行进度查询
const handleClick = async (val) => {
  ztTime.value = []
  activeDetailIndex.value = -1;
  weituoId.value = val.id
  await getTableZt(val.id)
  console.log(tableZt.value.weituoztMc, "委托状态")
  if (tableZt.value.weituoztMc == '委托创建') {
    active.value = 0
  }
  if (tableZt.value.weituoztMc == '委托提交') {
    active.value = 1
  }
  if (tableZt.value.weituoztMc == '取样完成') {
    active.value = 2
  }
  if (tableZt.value.weituoztMc == '制样接样') {
    active.value = 3
  }
  if (tableZt.value.weituoztMc == '制样完成') {
    active.value = 4
  }
  if (tableZt.value.weituoztMc == '等待各站审核') {
    active.value = 5
  }
  if (tableZt.value.weituoztMc == '物理审核完成') {
    active.value = 6
  }
  if (tableZt.value.weituoztMc == '化学审核完成') {
    active.value = 7
  }
  if (tableZt.value.weituoztMc == '等待综合科审核') {
    active.value = 8
  }
  if (tableZt.value.weituoztMc == '等待部长审核') {
    active.value = 9
  }
  if (tableZt.value.weituoztMc == '审核完成') {
    active.value = 10
  }
  if (tableZt.value.weituoztMc == '上传MES') {
    active.value = 11
  }
}

// 查询所有公司
const gongsiList = ref([])
const queryGS = () => {
  gongsiList.value = []
  var url = 'sci/Weituogl/queryGS'
  var param = {}
  proxy.$axios.get(url, param).then(resp => {
    if (resp.data.code == '0') {
      gongsiList.value = resp.data.data
      console.log(gongsiList.value)
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }

  })
}

// 查询所有的物料类别
const typeList = ref([])
const queryType = () => {
  var url = 'sci/platform/queryType'
  var param = {}
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      typeList.value = response.data.data
      console.log(response.data.data)
      console.log(typeList.value)
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
}

const {proxy} = getCurrentInstance()
const cardBodyStyle = ref(style.card)
const dialogVisible = ref(false)
const form = ref({})
const tableData = ref([])
const query = ref({
  materName: '',
  id: '',
})

const showA = ref(false)
const show = () => {
  showA.value = !showA.value
}

/**
 * 重置查询条件
 */
const reset = () => {
  Object.keys(query.value).map(key => {
    query.value[key] = ''
  })
}


// ==========按钮功能===========
// 搜索
const handleSearch = () => {
  currentPage.value = 1
  getTableData()
}
// 添加
const handleSave = () => {
  console.log('保存')
}
// 提交
const handleCommit = () => {
  console.log('提交')
}
// 批量删除
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log(val)
}
const handleRemoveBatch = () => {
  console.log('handleRemoveBatch')
  if (multipleSelection.value.length < 1) {
    ElMessage({
      type: 'warning',
      message: '请选择要删除的数据!'
    })
    return
  }

  ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    var ids = []
    multipleSelection.value.forEach((item, index) => {
      ids.push(item.id)
    })
    var param = {
      ids: JSON.stringify(ids)
    }
    proxy.$axios.post(url, param).then(response => {
      if (response.data.code == '0') {
        ElMessage({
          type: 'success',
          message: '操作成功!',
        });
        getTableData()
        dialogVisible.value = false
      } else {
        ElMessage({
          type: 'error',
          message: '操作失败!' + response.data.msg
        });
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  })
}
// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm(
      '确定删除本条记录?',
      '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }
  )
      .then(() => {
        // 假数据
        const fakeData = {
          code: 0,
          msg: '删除成功'
        };

        // 模拟接口响应
        if (fakeData.code == 0) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          });
          getTableData();
        } else {
          ElMessage({
            type: 'error',
            message: '删除失败' + fakeData.msg,
          });
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        });
      });
};


// ==========查询数据===========
const getTableData = () => {
  var url = 'sci/dataModify/query'
  var param = {
    page: currentPage.value,
    rows: pageSize.value,
    params: JSON.stringify(query.value)
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      tableData.value = response.data.data.records
      console.log(response.data.data.records)
      console.log(tableData.value)
      totalRows.value = response.data.data.total
      // weituoId.value=''
      // getTableZt(query.value)
      handleClick(query.value)

    } else {
      ElMessage.error('操作失败！' + response.data.msg)
    }
  })
};

/**
 * 分页
 */
const currentPage = ref(1)
const totalRows = ref(0)
const pageSizes = ref([5, 10, 20, 30, 40])
const pageSize = ref(5)
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getTableData()
}
</script>

<style scoped></style>