<template>
  <div class="app-container">
    <el-card style="margin-top: 2px">
      <el-descriptions title="基本信息" direction="vertical" :column="6" border>
        <el-descriptions-item label="客户名称" v-if="salesdetail.customer">
          {{ salesdetail.customer_.name }}</el-descriptions-item
        >
        <el-descriptions-item label="产品名称" v-if="salesdetail.product">
          {{ salesdetail.product_.name }}</el-descriptions-item
        >
        <el-descriptions-item
          label="产品型号"
          :span="2"
          v-if="salesdetail.product"
        >
          {{ salesdetail.product_.specification }}</el-descriptions-item
        >
     
        <el-descriptions-item label="合同名称" v-if="salesdetail.order">
          {{ salesdetail.order_.contract_.name }}</el-descriptions-item
        >
        <el-descriptions-item label="合同编号" v-if="salesdetail.order">
          {{ salesdetail.order_.contract_.number }}</el-descriptions-item
        >
           <el-descriptions-item label="订单编号" v-if="salesdetail.order">
          {{ salesdetail.order_.number }}
        </el-descriptions-item>
         <el-descriptions-item label="物流详情" v-if="ship_pic!=''">
          <el-link  type="primary" :href="salesdetail.ship_pic">物流单</el-link></el-descriptions-item>
      </el-descriptions>
      <el-button type="primary" style="margin-top:10px" @click="upload">上传物流信息</el-button>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>关联产品信息</span>
      </div>
      <el-table
        ref="singleTable"
        :data="saleproduct"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column type="index" width="50" />
        <el-table-column label="产品编号" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.number }}</template>
        </el-table-column>

        <el-table-column label="产品名称" show-overflow-tooltip>
          <template slot-scope="scope">{{
            scope.row.iproduct_.material_.name
          }}</template>
        </el-table-column>
        <el-table-column label="批次">
          <template slot-scope="scope">{{
            scope.row.iproduct_.batch
          }}</template>
        </el-table-column>
        <el-table-column label="仓库">
          <template slot-scope="scope">{{
            scope.row.iproduct_.warehouse_.name
          }}</template>
        </el-table-column>
        <el-table-column label="是否已军检">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_mtested == false">未军检</el-tag>
            <el-tag v-else>已军检</el-tag></template
          >
        </el-table-column>

        <el-table-column label="军检">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_mtestok == false">不合格</el-tag>
            <el-tag v-else>合格</el-tag></template
          >
        </el-table-column>
        <el-table-column label="装箱单号" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.packnum }}</template>
        </el-table-column>
        <el-table-column label="未装箱说明" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.remark }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="220px">
          <template slot-scope="scope">
            <el-link
              v-if="checkPermission(['warehouse_delete'])"
              type="primary"
              @click="handlePack(scope)"
              >装箱</el-link
            >

            <el-link
              v-if="checkPermission(['warehouse_delete'])"
              type="primary"
              @click="handleNotPack(scope)"
              >备注</el-link
            >
            <el-link
              v-if="checkPermission(['warehouse_delete'])"
              type="danger"
              @click="handleDelete(scope)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
  <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogVisibless"
      title="上传物流文件"
    >
      <el-form
        ref="Forms"
        :model="ship"
        label-width="100px"
        label-position="right"
        :rules="rule1"
      >
        <el-form-item label="文件" prop="template" >
          <el-upload
            ref="upload"
            :action="upUrl"
            :on-preview="handlePreview"
            :on-success="handleUpSuccess"
            :on-remove="handleRemove"
            :headers="upHeaders"
            :file-list="fileList"
            :limit="1"
            accept=".webp,.bmp,.jpg,.png,.tif,.gif,.apng"
          >
            <el-button size="small" type="primary">上传文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="dialogVisibless = false">取消</el-button>
        <el-button type="primary" @click="uploadship">确认</el-button>
      </div>
    </el-dialog>
      <el-dialog
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="60%"
        :title="dialogType === 'edit' ? '编辑装箱单' : '新增装箱单'"
      >
        <el-form
          ref="Form"
          :model="packData"
          label-width="100px"
          label-position="right"
        >
          <el-form-item label="装箱单号" prop="packnum">
            <el-input v-model="packData.packnum" placeholder="装箱单号" />
          </el-form-item>

          <el-form-item label="装箱文件确认" prop="iproducts">
            <el-table
              :data="packlist"
              border
              fit
              stripe
              highlight-current-row
              ref="multipleTable"
              height="300"
            >
              <el-table-column type="index" width="50" label="序号" />
              <el-table-column label="名称">
                <template slot-scope="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column label="单位">
                <template slot-scope="scope">{{ scope.row.unit }}</template>
              </el-table-column>
              <el-table-column label="数量" width="150">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input-number
                        v-model="scope.row.count"
                        :min="0"
                        :value="0"
                      ></el-input-number>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column label="库存数量">
                <template slot-scope="scope" v-if="scope.row.material_">{{
                  scope.row.material_.count
                }}</template>
              </el-table-column>
              <el-table-column label="安全库存数量">
                <template slot-scope="scope" v-if="scope.row.material_">{{
                  scope.row.material_.count_safe
                }}</template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
        <div style="text-align: right">
          <el-button type="danger" @click="dialogVisible = false"
            >取消</el-button
          >
          <el-button type="primary" @click="submitPack">确认</el-button>
        </div>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogVisibles"
        :close-on-click-modal="false"
        width="60%"
        title="未装箱备注"
      >
        <el-form
          ref="Form"
          :model="notpackData"
          label-width="100px"
          label-position="right"
        >
          <el-form-item label="备注" prop="remark">
            <el-input v-model="notpackData.remark" placeholder="未装箱备注" />
          </el-form-item>
        </el-form>
        <div style="text-align: right">
          <el-button type="danger" @click="dialogVisibles = false"
            >取消</el-button
          >
          <el-button type="primary" @click="submitnotPack">确认</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import {
  getSale,
  getSaleproductList,
  deleteSaleproduct,
  gePack,
  subPack,
  notPackremark,
  ship
} from "@/api/sam";
import checkPermission from "@/utils/permission";
 import { upUrl, upHeaders } from "@/api/file";
import { genTree } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
const defaultepackData = {
  packnum: "",
};
export default {
  components: { Pagination },
  data() {
    return {
      salesdetail: "",
      saleproduct: "",
      packlist: [],
       upHeaders: upHeaders(),
        upUrl: upUrl(),
      dialogVisible: false,
      dialogVisibles: false,
       dialogVisibless: false,
       ship:{},
      packData: defaultepackData,
      notpackData: { remark: "" },
      detail: [],
      fileList:[],
      saleproductId: null,
      saleProductid: null,
      dialogType: "new",
    };
  },

  computed: {},
  watch: {},
  created() {
    this.id = this.$route.params.id;
    this.getList();
    this.getSaleproductLists();
  },
  methods: {
    checkPermission,
    //详情
    getList() {
      getSale(this.id).then((response) => {
        if (response.data) {
          this.salesdetail = response.data;
        }
      });
    },
    //上传物流文件
      handlePreview(file) {
        if ("url" in file) {
          window.open(file.url);
        } else {
          window.open(file.response.data.path);
        }
      },
      handleUpSuccess(res, file, filelist) {
        this.ship.path = res.data.path;
        this.salesdetail.ship_pic=res.data.path;
        console.log(this.ship.path)
      },
      handleRemove(file, filelist){
        this.ship.path = null;
      },
    upload() {

     this.dialogVisibless=true;

    },

uploadship()
{
  console.log(this.ship);
    ship(this.id, this.ship).then((res) => {
        if (res.code >= 200) {
       
          this.dialogVisibless = false;
          this.$message.success("物流文件上传成功!");
        }
      });
},


    getSaleproductLists() {
      getSaleproductList({ sale: this.id, page: 0 }).then((response) => {
        if (response.data) {
          this.saleproduct = response.data;
        }
      });
    },
    handleDelete(scope) {
      this.$confirm("确认删除?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(async () => {
          await deleteSaleproduct(scope.row.id);
          this.getSaleproductLists();
          this.$message.success("成功");
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //装箱操作
    handlePack(scope) {
      this.packData = Object.assign({}, scope.row);
      this.dialogType = "new";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["Form"].clearValidate();
      });
      gePack(scope.row.id).then((response) => {
        if (response.data) {
          this.packlist = response.data.detail;
        }
      });

      this.saleproductId = scope.row.id;
    },

    submitPack() {
      this.packData.detail = this.packlist;
      console.log(this.packData);
      subPack(this.saleproductId, this.packData).then((res) => {
        if (res.code >= 200) {
          this.getSaleproductLists();
          this.dialogVisible = false;
          this.$message.success("成功");
        }
      });
    },
    //未装箱备注
    handleNotPack(scope) {
      this.dialogVisibles = true;
      this.saleProductid = scope.row.id;
    },
    submitnotPack() {
      notPackremark(this.saleProductid, this.notpackData).then((res) => {
        if (res.code >= 200) {
          this.getSaleproductLists();
          this.dialogVisible = false;
          this.$message.success("成功");
        }
      });
    },
  },
};
</script>
