<template>
  <div class="ns-item">
    <div class="main-header">
      <el-tooltip
        effect="dark"
        :content="'农事编码:' + rowData.nsCode"
        placement="top-start"
      >
        <span>农事编码:{{ rowData.nsCode }}</span>
      </el-tooltip>
    </div>
    <div class="main">
      <div class="head">
        <div class="iconBox">
          <div class="box-bg">{{rowData.nsTypeNames[0]}}</div>
        </div>
        <div class="label">
          <div class="name">
            <template v-for="(name, index) in rowData.nsTypeNames" :key="index">
              <template v-if="index != 0">、</template
              ><span class="txt">{{ name }}</span>
            </template>
            <span>(秋梢期)</span>
          </div>
          <template v-if="props.status === STATUS_ENUM.STAY_START">
            <div class="date_title date_day">
              <span>计划执行</span>
              <span>执行范围:{{ rowData.execRange }}天内</span>
            </div>
          </template>
          <template v-else-if="props.status === STATUS_ENUM.STAY_VIEW">
            <div class="date_title">
              <span class="day"
                >已观察<span>{{ rowData.seeDays }}</span
                >天</span
              >
              <span>执行范围:{{ rowData.execRange }}天内</span>
            </div>
          </template>
          <template v-else>
            <div class="date_title" :style="{ color: colorText() }">
              <span>{{ text(props.status) }}</span>
              <span :style="{ color: colorText() }"
                >执行范围:{{ rowData.execRange }}天内</span
              >
            </div>
          </template>
          <el-button
            v-if="
              props.status === STATUS_ENUM.STAY_START ||
              props.status === STATUS_ENUM.STAY_VIEW
            "
            color="#039DA1"
            class="edit-btn btn-size"
            @click="edit()"
            >编辑</el-button
          >
          <el-button
            v-if="
              props.status === STATUS_ENUM.STAY_START &&
              props.status === STATUS_ENUM.STAY_VIEW
            "
            color="#FF5358"
            class="edit-btn btn-size"
            >立即下发</el-button
          >
          <el-button
            v-if="props.status === STATUS_ENUM.STAY_CHECK"
            color="#888888"
            class="edit-btn btn-size"
            >等待复核</el-button
          >
          <el-button
            v-if="props.status === STATUS_ENUM.CHENG_XIAO_FEN_XI"
            color="#039DA1"
            class="edit-btn btn-size"
            >跟踪下发</el-button
          >
          <!--          <el-button color="#00DCC6" size="small" class="yse-events edit-btn2" @click="workerPath()">查看工人轨迹</el-button>-->
        </div>
      </div>
      <div class="nslb-info">
        <div class="info-title">
          <span>农事信息</span>
          <img src="@/assets/img/znxy/nslb_info_icon.png" />
        </div>
        <div class="info-cont">
          <div class="info-img">
            <img
              src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
            />
            <div class="overlay">
              <img
                v-if="
                  props.status === STATUS_ENUM.STAY_EXECUTE ||
                  props.status === STATUS_ENUM.STAY_CONFIRM ||
                  props.status === STATUS_ENUM.STAY_CHECK ||
                  props.status === STATUS_ENUM.CHENG_XIAO_FEN_XI
                "
                src="@/assets/img/znxy/download-icon.png"
              />
              <img v-else src="@/assets/img/znxy/edit_icon.png" />
              <span>农事处方</span>
            </div>
          </div>
          <div class="info-txt">
            <span>下发依据:{{ rowData.cause }}</span>
            <div>
              <span
                class="green"
                v-if="
                  props.status !== STATUS_ENUM.STAY_CONFIRM &&
                  props.status !== STATUS_ENUM.STAY_CHECK
                "
                >复核时间:执行{{ rowData.reviewAfterDay }}天后</span
              >
              <span class="green" v-else
                >复核时间:还剩余
                <div class="day">2</div>
                天</span
              >
              <span class="blue">指导专家:{{ rowData.expertName }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="table" v-if="props.status !== STATUS_ENUM.STAY_CONFIRM">
        <div class="thead">
          <div class="th">功效</div>
          <div class="th">类型</div>
          <div class="th">药物配比/倍</div>
          <div class="th">药物用量/ml</div>
        </div>
        <div class="tbody">
          <div
            v-for="(item, index) in rowData.drugList"
            :key="item.drugId"
            class="row"
          >
            <div class="col">药物{{ index + 1 }}</div>
            <div class="col">
              <el-popover
                placement="right-end"
                :width="200"
                trigger="hover"
                :content="item.drugName"
              >
                <template #reference>
                  {{ item.drugName }}
                </template>
              </el-popover>
            </div>
            <div class="col">1 : {{ item.peibi }}</div>
            <div class="col">{{ item.yongliang ? item.yongliang  : '-'}}</div>
          </div>
        </div>
      </div>
      <div class="zxqk" v-if="props.status === STATUS_ENUM.STAY_CONFIRM">
        <div class="qk-bg">
          <div class="qk-top">
            <div class="info-title qk-title qk-title-red">
              <div class="text-icon">
                <span>农服执行</span>
                <el-icon size="20" class="icon"><Warning /></el-icon>
              </div>
              <img src="@/assets/img/znxy/nslb_info_icon.png" />
            </div>
            <div class="qk-img">
              <div>
                <el-avatar
                  :size="39"
                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                />
              </div>
              <div class="ns-btn" @click="goGrzxqk">监督工人</div>
            </div>
            <ProgressBar :number="70" name="执行动态进度"></ProgressBar>
          </div>
          <div class="qk-center">
            <div class="qk-name"></div>
            <div class="qk-img">
              <div>
                <el-avatar
                  :size="39"
                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                />
              </div>
              <div class="ns-btn">查看照片</div>
            </div>
            <ProgressBar :number="60" name="上传执行照片进度"></ProgressBar>
          </div>
        </div>

        <div class="qk-bottom">
          <div class="info-title qk-title">
            <div class="text-icon">
              <span>农资凭证</span>
              <el-icon size="20" class="icon" color="#1CE57C"
                ><CircleCheck
              /></el-icon>
            </div>
            <img src="@/assets/img/znxy/nslb_info_icon.png" />
          </div>
          <div class="qkpz">
            <div class="qkpz-name qkpz-item">农资店点*****店</div>
            <div class="qkpz-cont qkpz-item">
              <img src="@/assets/img/znxy/link-icon.png" />
              <span>药物处方代码：***********</span>
            </div>
          </div>
        </div>
      </div>
      <template
        v-if="
          props.status === STATUS_ENUM.STAY_CONFIRM ||
          props.status === STATUS_ENUM.CHENG_XIAO_FEN_XI
        "
      >
        <div class="ns-effect-bg">
          <div class="info-title">
            <span>复核对比</span>
            <img src="@/assets/img/znxy/nslb_info_icon.png" />
          </div>
          <div class="image-list">
            <div class="image-item">
              <img
                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
              />
              <img
                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
              />
            </div>
            <div class="image-item">
              <img
                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
              />
              <img
                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
              />
            </div>
            <div class="more">
              <p>查看更多</p>
            </div>
          </div>
        </div>
      </template>
      <template v-if="props.status === STATUS_ENUM.STAY_CONFIRM">
        <div class="ns-effect-bg">
          <div class="info-title">
            <span @click="toPage('analysisDetails')">农事分析</span>
            <img src="@/assets/img/znxy/nslb_info_icon.png" />
          </div>
          <PieChart></PieChart>
        </div>
      </template>
      <template v-if="props.status === STATUS_ENUM.CHENG_XIAO_FEN_XI">
        <div class="ns-effect-bg">
          <div class="info-title">
            <span>序列照片</span>
            <img src="@/assets/img/znxy/nslb_info_icon.png" />
          </div>
          <div class="image-list">
            <div class="image-item">
              <img
                src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg"
              />
              <img
                src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg"
              />
            </div>
            <div class="image-item">
              <img
                src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg"
              />
              <img
                src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg"
              />
            </div>
            <div class="more">
              <p>查看更多</p>
            </div>
          </div>
        </div>
      </template>
      <template v-if="props.status === STATUS_ENUM.CHENG_XIAO_FEN_XI">
        <div class="ns-effect-bg">
          <div class="info-title">
            <span>指标折线图</span>
            <img src="@/assets/img/znxy/nslb_info_icon.png" />
          </div>
          <Zbbh></Zbbh>
        </div>
      </template>
      <div
        class="handle-btn"
        v-if="
          props.status === STATUS_ENUM.STAY_START ||
          props.status === STATUS_ENUM.STAY_VIEW
        "
      >
        <el-button
          @click="remove()"
          color="#F13640"
          class="button"
          v-if="props.status === STATUS_ENUM.STAY_VIEW"
          >删除农事</el-button
        >
        <el-button
          @click="updateStatus(STATUS_ENUM.STAY_VIEW)"
          color="#40B34D"
          class="button"
          v-else-if="props.status === STATUS_ENUM.STAY_START"
          >继续观察</el-button
        >
        <el-button
          color="#039DA1"
          @click="updateStatus(STATUS_ENUM.STAY_EXECUTE)"
          class="button"
          >立即下发</el-button
        >
      </div>
      <div class="handle-btn" v-if="props.status === STATUS_ENUM.STAY_EXECUTE">
        <el-button color="#FE762C" class="button" @click="handleFeedback"
          >意见反馈</el-button
        >
        <el-button
          color="#039DA1"
          @click="updateStatus(STATUS_ENUM.STAY_CONFIRM)"
          class="button"
          >开始执行</el-button
        >
      </div>
      <div class="handle-btn" v-if="props.status === STATUS_ENUM.STAY_CONFIRM">
        <el-button color="#039DA1" @click="goCheck()" class="btn"
          >去确认</el-button
        >
      </div>
    </div>
  </div>
  <!-- 意见反馈 -->
  <el-dialog
    class="v-dialog"
    v-model="dialogVisibleShow"
    width="550"
    :show-close="false"
  >
    <template #header>
      <div class="dialog-header">
        <div class="">意见反馈</div>
        <el-icon @click="dialogVisibleShow = false" class="close-icon" color="#00FFF0" size="20px"><CircleCloseFilled /></el-icon>
      </div>
    </template>
    <div class="dialog-body">
      <el-input
        v-model="textarea"
        :rows="4"
        type="textarea"
        placeholder="请输入农事反馈意见.."
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <div class="btn cancel-btn" @click="dialogVisibleShow = false">
          取消
        </div>
        <div class="btn confirm-btn" @click="dialogVisibleShow = false">
          确认
        </div>
      </div>
    </template>
  </el-dialog>
  <confirm :dialogVisibleShow="confirmDialogVisibleShow"
           title="警告" msg="是否继续执行这个操作？" @confirm="updateConfirmFun" @close="close"
  ></confirm>
  <confirm :dialogVisibleShow="removeDialogVisibleShow"
           title="警告" msg="是否确定删除？" @confirm="removeConfirmFun" @close="close"
  ></confirm>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { NS_RECORD_STATUS_ENUM as STATUS_ENUM } from "@/api/enum";
import { dateFormat } from "../../../../../utils/date_util";
import Zbbh from "../components/Zbbh";
import PieChart from "../components/PieChart";
import ProgressBar from "../components/ProgressBar";
import { ElMessage, ElMessageBox } from "element-plus";
import confirm from "@/components/confirm";
import { ref } from "vue";

const emits = defineEmits(["addNsRecord", "workerPath", "changeData"]);
const router = useRouter();
const route = useRoute();
const props = defineProps({
  rowData: {
    type: Object,
    required: true,
  },
  status: {
    type: Number,
    required: false,
  },
  tabItem: {
    type: Number,
    required: false,
  },
});

// 意见反馈
const dialogVisibleShow = ref(false);
const confirmDialogVisibleShow = ref(false)
const removeDialogVisibleShow = ref(false)
const currentStatus = ref(0)
const textarea = ref("");
const handleFeedback = () => {
  dialogVisibleShow.value = true;
};

function colorText() {
  const status = props.status;
  let color = "#FEEC51";
  if (
      status === STATUS_ENUM.STAY_CONFIRM ||
      status === STATUS_ENUM.STAY_CHECK
  ) {
    color = "#F79BD3";
  }
  if (status === STATUS_ENUM.CHENG_XIAO_FEN_XI) {
    color = "#8CD370";
  }
  return color;
}

function text(status) {
  let txt = "待执行";
  if (status === STATUS_ENUM.STAY_CONFIRM) {
    txt = "待确认";
  }
  if (status === STATUS_ENUM.STAY_CHECK) {
    txt = "待复核";
  }
  if (status === STATUS_ENUM.CHENG_XIAO_FEN_XI) {
    txt = "复核结束";
  }
  return txt;
}

function edit() {
  router.push({
    path: "/edit_ns_record",
    query: { recordId: props.rowData.id },
  });
}
function workerPath() {
  emits("workerPath", props.rowData);
}

function goCheck() {
  router.push({
    path: "/checkComparison",
    query: { recordId: props.rowData.id },
  });
}

function goGrzxqk() {
  router.push({
    path: "/grzxqk",
    query: { recordId: props.rowData.id },
  });
}

const toPage = (path) =>{
  router.push('/' + path)
}

/**
 * 更新状态
 * @param status
 */
function updateStatus(status) {
  confirmDialogVisibleShow.value = true
  currentStatus.value = status
}
function updateConfirmFun(){
  VE_API.nsjy.updateStatus({ id: props.rowData.id, status: currentStatus.value })
      .then(({ code }) => {
        if (code == 0) {
          ElMessage({
            message: "更新到" + text(status) + "！",
            type: "success",
          });
          setTimeout(() => {
            emits("changeData");
          }, 500);
        }
      });
}
function close(){
  confirmDialogVisibleShow.value = false;
  removeDialogVisibleShow.value = false;
}

const remove = () => {
  removeDialogVisibleShow.value = true
};
function removeConfirmFun(){
  VE_API.nsjy.remove({ id: props.rowData.id });
  ElMessage({
    type: "success",
    message: "删除成功！",
  });
  setTimeout(() => {
    emits("changeData");
  }, 500);
}
</script>

<style lang="scss" scoped>
@import "table";
@import "../../../../../styles/index";
.v-dialog {
  .dialog-body {
    ::v-deep {
      .el-textarea {
        --el-input-placeholder-color: rgba(11, 202, 245,.3);
      }
      .el-textarea__inner {
        background: rgba(12, 38, 46, 1);
        box-shadow:none
      }
    }
  }
  .dialog-footer {
    color: #fff;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid rgba(6, 160, 194, 0.5);
    padding: 12px;
    .btn {
      padding: 8px 23px;
      font-weight: bold;
      cursor: pointer;
    }
    .cancel-btn {
      background: #052b33;
      border-radius: 5px;
      border: 1px solid #00fff0;
    }
    .confirm-btn {
      background: url("@/assets/img/znxy/ns_btn.png") no-repeat center center /
        100% 100%;
      margin-left: 10px;
    }
  }
}
.ns-item {
  margin-top: 22px;
  .main-header {
    background: #47fff5;
    color: #000;
    width: 45%;
    border-top-right-radius: 14px;
    padding: 2px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .main {
    @include wh(99.8%, auto);
    background: #033c49;
    // border: 1px solid rgba(81, 233, 240, 0.6);
    padding: 9px;
    box-sizing: border-box;
    .head {
      @include wh(calc(100%), 61px);
      .iconBox {
        float: left;
        @include wh(61px, 61px);
        background: #023d3c;
        border: 1px solid rgba(2, 240, 235, 0.67);
        padding: 2px 4px;
        box-sizing: border-box;
        .box-bg{
          width: 100%;
          height: 100%;
          padding: 5px 10px;
          font-size: 19px;
          box-sizing: border-box;
          font-family: 'HANTI', sans-serif;
          background: url('@/assets/img/znxy/jd_ns_bg.png') no-repeat center center /100% 100%;
        }
      }
      .label {
        float: right;
        @include wh(calc(100% - 61px - 6px), 61px);
        @include ossBg("after_bg1.png");
        position: relative;
        .name {
          @include wh(auto, 16px);
          @include LeftTop(26px, 10px);
          font-weight: 500;
          font-size: 15px;
          color: #ffffff;
          .txt {
            color: #29e6dd;
          }
        }
        .date_title {
          @include wh(auto, 12px);
          @include LeftTop(25px, 33px);
          font-weight: normal;
          font-size: 14px;
          color: #fe3d4f;
          .day {
            span {
              color: #fff;
              margin-right: 0;
            }
          }
          span {
            margin-right: 10px;
          }
        }
        .date_day {
          color: #de9014;
        }
        .edit-btn {
          position: absolute;
          top: 14px;
          right: 18px;
          color: #ffffff;
          width: 71px;
        }
        .edit-btn2 {
          position: absolute;
          top: 10px;
          right: 70px;
          color: #ffffff;
        }
        .btn-size {
          padding: 8px 6px;
        }
      }
    }
    .info-title {
      font-weight: normal;
      font-size: 15px;
      color: #f1ffff;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      box-sizing: border-box;
      .text-icon {
        display: flex;
        align-items: center;
      }
      span {
        margin-left: 15px;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          left: -12px;
          top: 7px;
          width: 8px;
          height: 8px;
          background: #01f9ff;
          border-radius: 50%;
        }
      }
      img {
        margin-top: -6px;
        width: 72%;
      }
    }
    .qk-title {
      padding: 0 0 8px 0;
      span {
        margin-right: 4px;
      }
    }
    .qk-title-red {
      color: #ff2e51;
      &::before {
        background: #ff2f52;
      }
    }
    .nslb-info {
      background: url("@/assets/img/znxy/nslb_info_bg.png") no-repeat center
        center / 100% 100%;
      width: 100%;
      height: 103px;
      margin: 8px 0 4px 0;
      box-sizing: border-box;

      .info-cont {
        display: flex;
        box-sizing: border-box;
        padding-left: 15px;
        .info-img {
          border-radius: 2px;
          border: 1px solid rgba(81, 233, 240, 0.49);
          margin-right: 7px;
          position: relative;
          img {
            width: 73px;
            height: 51px;
          }
          .overlay {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: rgba(3, 25, 27, 0.62);
            border-radius: 2px;
            font-weight: bold;
            font-size: 11px;
            color: #21f9ff;
            text-align: center;
            cursor: pointer;
            img {
              width: 10px;
              height: 10px;
              margin-right: 2px;
            }
          }
        }
        .info-txt {
          font-weight: bold;
          color: #ffffff;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          span {
            position: relative;
            margin-left: 20px;
            &::before {
              content: "";
              position: absolute;
              left: -13px;
              top: 7px;
              width: 6px; /* 设置正方形的宽度 */
              height: 6px; /* 设置正方形的高度 */
              background-color: #ff9b65; /* 设置背景颜色 */
              transform: rotate(45deg); /* 旋转45度 */
              margin-right: 4px;
              transform-origin: center; /* 旋转的基准点为中心 */
            }
          }
          .green {
            margin-right: 8px;
            .day {
              color: #ff0000;
              display: inline-block;
            }
            &::before {
              background-color: #29e686; /* 设置背景颜色 */
            }
          }
          .blue {
            &::before {
              background-color: #21fdf6; /* 设置背景颜色 */
            }
          }
        }
      }
    }
    .zxqk {
      .qk-bg {
        background: url("@/assets/img/znxy/nslb_info_bg.png") no-repeat center
          center / 100% 100%;
        width: 100%;
        padding: 10px 15px;
        box-sizing: border-box;
      }
      .qk-name {
        margin-bottom: 10px;
        color: #ff2e51;
        display: flex;
        align-items: center;
        .icon {
          margin-left: 4px;
        }
        .diamond {
          width: 8px;
          height: 8px;
          background: #ff2f52;
          border-radius: 50%;
          margin-right: 5px;
        }
      }
      .qk-bottom {
        margin-top: 4px;
        background: url("@/assets/img/znxy/nslb_info_bg.png") no-repeat center
          center / 100% 100%;
        width: 100%;
        padding: 10px 15px;
        box-sizing: border-box;
        .qk-name {
          color: #fff;
        }
        .diamond {
          background-color: #01f9ff; /* 设置背景颜色 */
        }
        .qkpz {
          .qkpz-item {
            padding: 8px 6px;
            background: url("@/assets/img/znxy/text_bg.png") no-repeat center
              center / 100% 100%;
            width: 100%;
            font-weight: 800;
            color: #85c2c6;
            box-sizing: border-box;
            margin-bottom: 2px;
          }
          .qkpz-cont {
            color: #12fcff;
            img {
              width: 12px;
              height: 12px;
              margin-right: 5px;
            }
          }
        }
      }
      .qk-img {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .btn-size {
          color: #ffffff;
        }
      }
    }
    .ns-btn {
      background: url("@/assets/img/znxy/ns_btn_bg.png") no-repeat center center /
        100% 100%;
      padding: 6px 10px;
    cursor: pointer;
    }
    .ns-effect-bg {
      background: url("@/assets/img/znxy/nslb_info_bg.png") no-repeat center
        center / 100% 100%;
      width: 100%;
      box-sizing: border-box;
      margin-top: 4px;
    }
    .image-list {
      display: flex;
      width: 100%;
      padding: 0 8px 8px 13px;
      box-sizing: border-box;
      justify-content: space-between;
      position: relative;
      .image-item {
        border: 1px solid rgba(81, 233, 240, 0.6);
        width: 47.5%;
        display: flex;
        justify-content: space-between;
        padding: 3px;
        border-radius: 4px;
        img {
          width: 49%;
          height: 85px;
          border-radius: 4px;
        }
      }
      .more {
        position: absolute;
        top: 15px;
        right: -10px;
        width: 33px;
        height: 60px;
        background: url(@/assets/img/more_bg.png) no-repeat;
        color: #000;
        text-align: center;
        writing-mode: vertical-rl;
        cursor: pointer;
        p {
          margin-right: 4px;
          font-weight: 800;
          font-size: 12px;
        }
      }
    }
    .handle-btn {
      display: flex;
      justify-content: space-between;
      width: 90%;
      margin: 15px auto 6px auto;
      .button {
        width: 45%;
        color: #ffffff;
      }
      .btn {
        width: 50%;
        margin: auto;
        color: #ffffff;
      }
    }
  }
}
.ns-item:first-child {
  margin-top: 10px;
}
</style>
