<template>
  <div class="app-container">
    <el-card shadow="never" class="card-show" v-if="itemJson" style="margin-bottom: 24px">
      <div>
        <h3 style="font-weight: blod">
          {{ itemJson.itemTitle }}({{ itemJson.itemId }})
          <el-button
            type="primary"
            icon="el-icon-document-add"
            size="mini"
            @click="okInfomation"
            style="float: right"
            :loading="loading"
            v-if="itemJson.collectSampleStatus == 1"
            :disabled="
              $store.getters.roles[0] != 'admin' &&
              $store.getters.roles[0] != 'supplyChainAdmin' &&
              $store.getters.roles[0] != 'courtship' &&
              $store.getters.roles[0] != 'courtshipManager'
            "
            >通过</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-document-add"
            size="mini"
            @click="
              refuseVisible = true;
              refuseInfo = null;
            "
            style="float: right; margin: 0 10px"
            v-if="itemJson.collectSampleStatus == 1"
            :disabled="
              $store.getters.roles[0] != 'admin' &&
              $store.getters.roles[0] != 'supplyChainAdmin' &&
              $store.getters.roles[0] != 'courtship' &&
              $store.getters.roles[0] != 'courtshipManager'
            "
            >拒绝</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-document-add"
            size="mini"
            @click="handleAddbroadcast"
            style="float: right; margin: 0 10px"
            v-if="itemJson.collectSampleStatus == 3"
            :disabled="
              $store.getters.roles[0] != 'admin' &&
              $store.getters.roles[0] != 'supplyChainAdmin' &&
              $store.getters.roles[0] != 'courtship' &&
              $store.getters.roles[0] != 'courtshipManager'
            "
            >录入单号</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-document-add"
            size="mini"
            style="float: right"
            @click="
              workVisible = true;
              noticeContent = '';
            "
            v-if="itemJson.collectSampleStatus == 5"
            :disabled="
              $store.getters.roles[0] != 'admin' &&
              $store.getters.roles[0] != 'supplyChainAdmin' &&
              $store.getters.roles[0] != 'bdManager' &&
              $store.getters.roles[0] != 'bd' &&
              $store.getters.roles[0] != 'association' &&
              $store.getters.roles[0] != 'associationManager'
            "
            >上传作业</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-document-add"
            size="mini"
            style="float: right"
            @click="workLookVisible = true"
            v-if="itemJson.collectSampleStatus == 6"
            >查看作业</el-button
          >
        </h3>
        <div style="display: flex; justify-content: space-between">
          <el-descriptions title="" style="width: 80%">
            <el-descriptions-item label="创建人">{{
              itemJson.itemCreateName
            }}</el-descriptions-item>
            <el-descriptions-item label="商品ID" :span="2">{{
              itemJson.itemId
            }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{
              itemJson.createTime
            }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="1">
              {{ itemJson.collectSampleDesc }}
            </el-descriptions-item>
            <el-descriptions-item label="快递单号" :span="1">
              {{ itemJson.courierNumber ? itemJson.courierNumber : "-" }}
            </el-descriptions-item>
          </el-descriptions>
          <div style="width: 150px">
            <p>状态</p>
            <p style="font-weight: bold">
              {{ itemJson.collectSampleStatus | collectSampleStatusName }}
            </p>
          </div>
        </div>
      </div>
    </el-card>
    <el-row :gutter="24" v-if="itemJson">
      <el-col :span="24" v-if="itemJson">
        <el-card shadow="never" class="card-show">
          <el-card shadow="never" class="card-show">
            <h4><span class="prefix"></span>流程进度</h4>
            <el-steps :active="itemLogs.length - 1" align-center>
              <el-step title="创建领取">
                <div slot="description">
                  {{ itemLogs[0] ? itemLogs[0].userName : "" }}
                  <br />
                  {{ itemLogs[0] ? itemLogs[0].updateTime : "" }}
                </div>
              </el-step>
              <el-step
                :title="`招商审核${
                  itemLogs[1]
                    ? itemLogs[1].collectSampleStatus == 3
                      ? '通过'
                      : '拒绝'
                    : ''
                }`"
              >
                <div slot="description">
                  {{ itemLogs[1] ? itemLogs[1].userName : "" }}
                  <br />
                  {{ itemLogs[1] ? itemLogs[1].updateTime : "" }}
                </div></el-step
              >
              <el-step title="快递录入">
                <div slot="description">
                  {{ itemLogs[2] ? itemLogs[2].userName : "" }}
                  <br />
                  {{ itemLogs[2] ? itemLogs[2].createTime : "" }}
                </div></el-step
              >
              <el-step title="作业上传">
                <div slot="description">
                  {{ itemLogs[3] ? itemLogs[3].userName : "" }}
                  <br />
                  {{ itemLogs[3] ? itemLogs[3].createTime : "" }}
                </div></el-step
              >
              <el-step title="完成">
                <div slot="description">
                  {{ itemLogs[4] ? itemLogs[4].userName : "" }}
                  <br />
                  {{ itemLogs[4] ? itemLogs[4].createTime : "" }}
                </div></el-step
              >
            </el-steps>
          </el-card>
          <el-card shadow="never" class="card-show main-top">
            <h4><span class="prefix"></span>用户信息</h4>
            <div style="width: 100%" class="item-name-calss dh-data">
              <p>达人ID：{{ itemJson.promoterId }}</p>
              <p>达人昵称：{{ itemJson.promoterNickName }}</p>
              <p>收件人：{{ itemJson.consignee }}</p>
              <p>联系电话：{{ itemJson.promoterPhone }}</p>
              <p>联系地址：{{ itemJson.promoterAddress }}</p>
            </div>
          </el-card>
          <el-card shadow="never" class="card-show main-top" v-if="itemInfo">
            <h4><span class="prefix"></span>物流信息</h4>
            <div style="width: 100%; margin-bottom: 15px" class="item-name-calss dh-data">
              <p>快递单号：{{ itemInfo.courierNumber }}</p>
            </div>
            <div
              style="width: 100%"
              class="item-name-calss dh-data"
              v-if="!!itemInfo.expressData && itemInfo.expressData.length > 0"
            >
              <timeline :reverse="false">
                <timeline-item
                  v-for="(activity, index) in itemInfo.expressData"
                  :key="index"
                  :timestamp="activity.ftime"
                >
                  {{ activity.context }}
                </timeline-item>
              </timeline>
            </div>
            <div v-else>
              <el-empty description="暂无数据"></el-empty>
            </div>
          </el-card>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      title="拒绝原因"
      :visible.sync="refuseVisible"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-input
        placeholder="请输入拒绝原因"
        style="width: 100%"
        type="textarea"
        :rows="2"
        v-model="refuseInfo"
      >
      </el-input>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRefuse" :loading="refuseLoading"
          >确 定</el-button
        >
        <el-button
          @click="
            refuseLoading = false;
            refuseVisible = false;
            refuseInfo = null;
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="录入订单"
      :visible.sync="openAllocation"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        ref="formBroadcast"
        :model="formBroadcast"
        :rules="rulesBroadcast"
        label-width="100px"
        :inline="true"
      >
        <el-form-item label="选择快递公司" prop="companyCode">
          <el-select v-model="formBroadcast.companyCode" placeholder="请选择">
            <el-option
              v-for="item in superiorList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="快递单号" prop="courierNumber">
          <el-input
            placeholder="请输入快递单号"
            style="width: 240px"
            v-model.trim="formBroadcast.courierNumber"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormBroadcast" :loading="confirmLoading"
          >确 定</el-button
        >
        <el-button
          @click="
            confirmLoading = false;
            openAllocation = false;
            formBroadcast = {};
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>
    <!-- 上传作业 -->
    <el-dialog title="上传作业" :visible.sync="workVisible" width="500px" append-to-body>
      <uploadEditor
        v-model="noticeContent"
        style="min-height: 100px"
        v-if="workVisible"
      />

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="workUpload" :loading="confirmLoading"
          >确 定</el-button
        >
        <el-button
          @click="
            confirmLoading = false;
            workVisible = false;
            noticeContent = '';
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>
    <!-- 查看作业 -->
    <el-dialog
      title="查看作业"
      :visible.sync="workLookVisible"
      width="900px"
      append-to-body
      center
      :close-on-click-modal="false"
    >
      <div v-if="itemJson.taskFileUrl">
        <!-- <div v-html="itemJson.taskFileUrl"></div> -->
        <div v-html="itemJson.taskFileUrl" style="width: 100%; overflow: auto"></div>
      </div>
      <el-dialog
        width="30%"
        title="拒绝原因"
        :visible.sync="innerVisible"
        append-to-body
        center
        :close-on-click-modal="false"
      >
        <el-input
          placeholder="请输入拒绝原因"
          style="width: 100%"
          type="textarea"
          :rows="2"
          v-model="refuseInfo"
        >
        </el-input>
        <div
          slot="footer"
          class="dialog-footer"
          v-if="
            $store.getters.roles[0] == 'admin' ||
            $store.getters.roles[0] == 'supplyChainAdmin' ||
            $store.getters.roles[0] == 'courtship' ||
            $store.getters.roles[0] == 'courtshipManager'
          "
        >
          <el-button type="primary" @click="workReject" :loading="confirmLoading"
            >确 定</el-button
          >
          <el-button
            @click="
              innerVisible = false;
              refuseInfo = null;
            "
            >取 消</el-button
          >
        </div>
      </el-dialog>
      <div
        slot="footer"
        class="dialog-footer"
        v-if="
          $store.getters.roles[0] == 'admin' ||
          $store.getters.roles[0] == 'supplyChainAdmin' ||
          $store.getters.roles[0] == 'courtship' ||
          $store.getters.roles[0] == 'courtshipManager'
        "
      >
        <el-button type="primary" @click="workLookUpload" :loading="loading"
          >通 过</el-button
        >
        <el-button
          @click="
            innerVisible = true;
            refuseInfo = null;
          "
          >拒 绝</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getItemPreview,
  insertItem,
  getDetail,
  editPreview,
  getCompany,
} from "@/api/goodsManagement/goods";

import Timeline from "./timeline/index.js";
import TimelineItem from "./timeline-item/index.js";

import uploadEditor from "./uploadEditor.vue";
export default {
  name: "goods-preview",
  components: {
    Timeline,
    TimelineItem,
    uploadEditor,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: null,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 字典表格数据
      typeList: [],
      //上传文件类型
      fileType: [".doc", ".xls", ".xlsx", ".ppt", ".pdf", ".csv"],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openFp: false,
      formFp: {},
      formBroadcast: {},
      rulesBroadcast: {
        companyCode: {
          required: true,
          message: "快递公司必选",
          trigger: "change",
        },
        courierNumber: {
          required: true,
          message: "快递单号必填",
          trigger: "blur",
        },
      },
      // 是否可编辑
      edit: false,
      // 分配销售
      openAllocation: false,
      // 选择的销售id
      saleId: undefined,
      // 销售列表
      saleList: [],
      // 分配销售确定loading
      confirmLoading: false,
      // 日期范围
      dateRange: [],
      superiorList: [],
      // 查询参数
      timer: null,
      theSpeed: this.speed,
      imgWidth: 260,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        itemTitle: undefined,
        itemId: undefined,
        examineStatus: "2",
      },
      judgeStatus: 1,
      itemInfo: null,
      itemJson: null,
      itemLogs: null,
      refuseInfo: null,
      refuseVisible: false,
      refuseLoading: false,
      superiorList: [],
      workVisible: false,
      noticeContent: "",
      workLookVisible: false,
      innerVisible: false,
    };
  },
  created() {
    console.log(this.itemInfo);
  },
  mounted() {
    this.getItemPreview();
    this.$nextTick(() => {});
  },
  filters: {
    collectSampleStatusName(value) {
      let name = {
        1: "待审核",
        2: "领样申请审核拒绝",
        3: "待录入订单号",
        4: "已发货",
        5: "已签收待上传作业",
        6: "待招商审核",
        7: "审核通过",
      };
      return name[value];
    },
  },
  watch: {},
  methods: {
    getItemPreview() {
      getDetail({
        id: this.$route.query.id,
        userId: this.$store.getters.userId,
      }).then((res) => {
        this.itemJson = res.sample;
        this.itemInfo = res.express
          ? {
              ...res.express,
              expressData: JSON.parse(res.express.expressData),
            }
          : null;
        this.itemLogs = res.logs;
      });
    },
    workLookUpload() {
      var params = {};
      params.id = this.$route.query.id;
      params.collectSampleStatus = 7;
      params.userId = this.$store.getters.userId;
      params.userName = this.$store.getters.name;
      editPreview(params)
        .then((res) => {
          this.getItemPreview();
          this.confirmLoading = false;
          this.innerVisible = false;
          this.refuseInfo = null;
          this.workLookVisible = false;
          this.showWork = null;
          this.$modal.msgSuccess("审核通过");
        })
        .catch(() => {
          this.$message.error("失败");
        });
    },
    workReject() {
      this.confirmLoading = true;
      if (!!this.refuseInfo) {
        var params = {};
        params.id = this.$route.query.id;
        params.collectSampleStatus = 5;
        params.collectSampleDesc = this.refuseInfo;
        params.userId = this.$store.getters.userId;
        params.userName = this.$store.getters.name;
        editPreview(params)
          .then((res) => {
            this.confirmLoading = false;
            this.innerVisible = false;
            this.refuseInfo = null;
            this.workLookVisible = false;
            this.showWork = null;
            this.getItemPreview();
            this.$modal.msgSuccess("已拒绝");
          })
          .catch(() => {
            this.confirmLoading = false;
            this.$message.error("失败");
          });
      } else {
        this.$message.error("请填写拒绝理由");
      }
    },
    workUpload() {
      this.confirmLoading = true;
      if (!!this.noticeContent) {
        var params = {};
        params.id = this.$route.query.id;
        params.taskFileUrl = this.noticeContent;
        params.userId = this.$store.getters.userId;
        params.userName = this.$store.getters.name;
        editPreview(params)
          .then((res) => {
            this.confirmLoading = false;
            this.workVisible = false;
            this.getItemPreview();
            this.$modal.msgSuccess("上传成功");
          })
          .catch(() => {
            this.$message.error("失败");
          });
      } else {
        this.$message.error("请上传作业");
      }
    },
    handleAddbroadcast(item) {
      this.$nextTick(() => {
        this.openAllocation = true;
        getCompany().then((res) => {
          this.superiorList = res;
        });
      });
    },
    /** 录入单号确定 */
    submitFormBroadcast: function () {
      this.$refs["formBroadcast"].validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          var params = { ...this.formBroadcast };
          params.id = this.$route.query.id;
          params.userId = this.$store.getters.userId;
          params.userName = this.$store.getters.name;
          editPreview(params)
            .then((res) => {
              this.confirmLoading = false;
              this.openAllocation = false;
              this.formBroadcast = {};
              this.$modal.msgSuccess("录入单号成功");
              this.getItemPreview();
            })
            .catch(() => {
              this.confirmLoading = false;
              this.$message.error("失败");
            });
        }
      });
    },
    okInfomation() {
      this.loading = true;
      this.$modal
        .confirm(`请确认是否审核通过该领样？`)
        .then(() => {
          var params = {};
          params.id = this.$route.query.id;
          params.collectSampleStatus = 3;
          params.userId = this.$store.getters.userId;
          params.userName = this.$store.getters.name;
          editPreview(params)
            .then((res) => {
              this.$modal.msgSuccess("审核通过");
              this.loading = false;
              this.getItemPreview();
            })
            .catch(() => {
              this.$message.error("失败");
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    submitRefuse(item) {
      this.refuseLoading = true;
      if (!!this.refuseInfo) {
        var params = {};
        params.id = this.$route.query.id;
        params.collectSampleStatus = 2;
        params.collectSampleDesc = this.refuseInfo;
        params.userId = this.$store.getters.userId;
        params.userName = this.$store.getters.name;
        editPreview(params)
          .then((res) => {
            this.refuseLoading = false;
            this.refuseVisible = false;
            this.getList();
            this.$modal.msgSuccess("已拒绝");
          })
          .catch(() => {
            this.$message.error("失败");
          });
      } else {
        this.$message.error("请填写拒绝理由");
      }
    },
    addNew() {
      this.loading = true;
      if (this.judgeStatus == 1) {
        var params = {
          ...this.itemInfo,
          ...this.itemJson,
          userId: this.$store.getters.userId,
          userName: this.$store.getters.name,
          itemGalleryUrls: this.itemJson.itemGalleryUrls
            ? JSON.stringify(this.itemJson.itemGalleryUrls)
            : null,
          itemDescUrls: this.itemJson.itemDescUrls
            ? JSON.stringify(this.itemJson.itemDescUrls)
            : null,
          skuList: this.itemJson.skuList ? JSON.stringify(this.itemJson.skuList) : null,
        };
      } else if (this.judgeStatus == 2) {
        var params = {
          ...this.itemInfo,
          userId: this.$store.getters.userId,
          userName: this.$store.getters.name,
          itemImgUrl: this.itemJson.itemImgUrl,
          itemTitle: this.itemJson.itemTitle,
          shopTitle: this.itemJson.sellerNickName,
          itemPrice: this.itemJson.itemPrice,
          zkFinalPrice: this.itemJson.itemPrice,
          skuPrice: this.itemJson.itemPrice,
          categoryName: this.itemJson.itemCategoryName,
          activityItemStatus: 5,
          detailUrl: this.itemJson.detailUrl,
        };
      }

      insertItem(params).then((res) => {
        this.loading = false;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.entire-line {
  width: 100%;
  ::v-deep .el-form-item__content {
    width: 60%;
  }
}
::v-deep .el-form-item__label {
  white-space: nowrap;
}
::v-deep a {
  color: #409eff;
  display: block;
  text-align: left;
}
.item-name-calss p {
  margin: 0;
  text-align: left;
}
.tableBox {
  width: 100%;
}
::v-deep .el-tabs__content {
  overflow: initial;
}

.main-top {
  margin-top: 24px;
}

::v-deep a {
  color: #409eff;
  display: block;
  text-align: left;
  line-height: 30px;
}
.item-name-calss p {
  margin: 0;
  text-align: left;
  line-height: 30px;
}
.tableBox {
  width: 100%;
}
.prefix {
  display: inline-block;
  width: 3px;
  height: 15px;
  background: rgb(104, 163, 253);
  position: relative;
  top: 2px;
  margin-right: 5px;
}
.dh p {
  font-size: 14px;
}
.dh-data p {
  font-size: 16px;
}
.main-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
