<template>
  <div>
    <div class="fa-box">
      <div class="lik">
        <div class="fa-ji">
          <div class="ge"></div>
          <div class="fa-text">产品货运单</div>
        </div>
      </div>
      <div class="biaoge">
        <div class="biao-box">
          <div class="fhuo">
            <div class="fahuos">
              <div class="fas-text">产品货运单号</div>
              <input
                type="text"
                placeholder="请输入产品货运单号"
                class="fa-input"
              />
            </div>
            <div class="fahuos">
              <div class="fas-text">电站</div>
              <input type="text" placeholder="请输入电站" class="fa-input" />
            </div>
            <div class="fahuos">
              <div class="fas-text">承运单位</div>
              <input
                type="text"
                placeholder="请输入承运单位"
                class="fa-input"
              />
            </div>
            <div class="fahuos">
              <div class="fas-text">状态</div>
              <input type="text" placeholder="请输入状态" class="fa-input" />
            </div>
            <div class="fahuos">
              <div class="fas-text">制单人</div>
              <input type="text" placeholder="请输入制单人" class="fa-input" />
            </div>
            <div class="chaxun">
              <img src="../../assets/chaxun.png" class="cha-imgs" alt="" />
            </div>
          </div>
        </div>
        <!-- 显示列表 -->
        <div class="zhonlist">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            height="100%"
            :header-cell-style="{ background: '#F4F4F5', color: '#303133' }"
          >
            <el-table-column fixed prop="date" label="产品货运单号" width="270">
            </el-table-column>
            <el-table-column prop="name" label="电站" width="270">
            </el-table-column>
            <el-table-column prop="province" label="销售员" width="128">
            </el-table-column>
            <el-table-column prop="city" label="联系人" width="128">
            </el-table-column>
            <el-table-column prop="address" label="派车单编码" width="160">
            </el-table-column>
            <el-table-column prop="zip" label="承运单位" width="280">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="256">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="safiingList(scope.$index)"
                  >编制货运单</el-button
                >
                <el-button type="text" size="small" @click="plot(scope.$index)"
                  >打印</el-button
                >
                <!-- <el-button type="text" size="small" @click="cha"
                  >审核</el-button
                > -->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="tiaoshu">
        <div class="left-io"></div>
        <div class="gon"></div>
        <div class="kls">
          <!-- <el-pagination
            :page-size="20"
            :pager-count="11"
            layout="prev, pager, next"
            :total="1000"
          >
          </el-pagination> -->
        </div>
      </div>
    </div>
    <!-- 编制产品货运单 -->
    <el-dialog
      title="编制产品货运单"
      :visible.sync="dialogVisible"
      width="80%"
      style="margin-top: 20px"
      :append-to-body="true"
    >
      <div class="liebiao" style="margin-top: 24px">
        <div class="fahuo-li">
          <div class="a">
            <div class="sd">
              <div class="fa-ji">产品货运单号</div>
              <input
                type="text"
                placeholder="请输入产品货运单号"
                class="input"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">联系人</div>
              <input
                type="text"
                v-model="linkman"
                placeholder="请输入联系人"
                class="input"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">承运单位</div>
              <input
                type="text"
                v-model="carrier"
                placeholder="请输入承运单位"
                class="input"
              />
            </div>
          </div>

          <div class="a">
            <div class="sd">
              <div class="fa-ji">电站</div>
              <input
                type="text"
                v-model="powerPlant"
                placeholder="请输入电站"
                class="input"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">联系人电话</div>
              <input
                type="text"
                v-model="linkmanPhone"
                placeholder="请输入联系人电话"
                class="input"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">车辆牌号</div>
              <input
                type="text"
                v-model="carnum"
                placeholder="请输入车辆牌号"
                class="input"
              />
            </div>
          </div>

          <div class="a">
            <div class="sd">
              <div class="fa-ji">售货员</div>
              <input
                type="text"
                v-model="salesman"
                placeholder="请输入售货员"
                class="input"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">派车单编码</div>
              <input
                type="text"
                v-model="sectCarList"
                placeholder="请输入派车单编码"
                class="input"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">车辆负责人</div>
              <input
                type="text"
                v-model="carPearson"
                placeholder="请输入车辆负责人"
                class="input"
              />
            </div>
          </div>
          <div class="a">
            <div class="sd">
              <div class="fa-ji">售货员电话</div>
              <input
                type="text"
                v-model="salePhone"
                placeholder="请输入售货员电话"
                class="input"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">合同号</div>
              <input
                type="text"
                v-model="pact"
                placeholder="请输入合同号"
                class="input"
              />
            </div>
          </div>
        </div>
        <div class="jichus">
          <div class="gesk"></div>
          <div class="jichu">配车明细</div>
        </div>
        <div class="lista">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            height="100%"
            :header-cell-style="{ background: '#F4F4F5', color: '#303133' }"
          >
            <el-table-column fixed :prop="date" label="产品型号" width="292">
            </el-table-column>
            <el-table-column :prop="name" label="产品编号" width="292">
            </el-table-column>
            <el-table-column :prop="province" label="产品数量" width="292">
            </el-table-column>
            <el-table-column :prop="city" label="要求到货时间" width="292">
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="292">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="fahuo-li" style="margin-top: 24px">
          <div class="a">
            <div class="sd">
              <div class="fa-ji">总件数</div>
              <input
                type="text"
                v-model="allTotals"
                placeholder="请输入总件数"
                class="input"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">制单人</div>
              <input
                type="text"
                v-model="madeListman"
                placeholder="请输入制单人"
                class="input"
              />
            </div>
          </div>

          <div class="a">
            <div class="sd">
              <div class="fa-ji">发货单位电话</div>
              <input
                v-model="shippingPhone"
                type="text"
                placeholder="请输入发货单位电话"
                class="input"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">制单时间</div>
              <input
                type="text"
                v-model="madeListTime"
                placeholder="请输入制单时间"
                class="input"
              />
            </div>
          </div>

          <div class="a">
            <div class="sd">
              <div class="fa-ji">发货单位传真</div>
              <input
                type="text"
                placeholder="请输入发货单位传真"
                class="input"
                v-model="shippingFax"
              />
            </div>
          </div>
          <div class="a">
            <div class="sd">
              <div class="fa-ji">打印状态</div>
              <input type="radio" v-model="plotState" value="已打印" />已打印
              <br />
              <br />
              <input type="radio" v-model="plotState" value="未打印" />未打印
            </div>
          </div>
        </div>
        <div class="queren">
          <el-button type="primary" round @click="sureSafingList"
            >确认</el-button
          >
          <el-button round @click="dialogVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 产品货运单 -->
    <el-dialog
      title="产品货运单"
      :visible.sync="dialogVisibleg"
      width="80%"
      style="margin-top: 60px"
      :append-to-body="true"
    >
      <div class="liebiao" style="margin-top: 24px">
        <div class="fahuo-li">
          <div class="a">
            <div class="sd">
              <div class="fa-ji">产品货运单号</div>
              <input
                type="text"
                placeholder="请输入产品货运单号"
                class="input"
              />
            </div>
            <div class="sd">
              <div class="fa-ji">联系人</div>
              <div class="conrt">{{ poltShippingList.linkman }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">承运单位</div>
              <div class="conrt">{{ poltShippingList.carrier }}</div>
            </div>
          </div>

          <div class="a">
            <div class="sd">
              <div class="fa-ji">电站</div>
              <div class="conrt">{{ poltShippingList.powerPlant }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">联系人电话</div>
              <div class="conrt">{{ poltShippingList.linkmanPhone }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">车辆牌号</div>
              <div class="conrt">{{ poltShippingList.carnum }}</div>
            </div>
          </div>

          <div class="a">
            <div class="sd">
              <div class="fa-ji">售货员</div>
              <div class="conrt">{{ poltShippingList.salesman }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">派车单编码</div>
              <div class="conrt">{{ poltShippingList.sectCarList }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">车辆负责人</div>
              <div class="conrt">{{ poltShippingList.carPearson }}</div>
            </div>
          </div>
          <div class="a">
            <div class="sd">
              <div class="fa-ji">售货员电话</div>
              <div class="conrt">{{ poltShippingList.salePhone }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">合同号</div>
              <div class="conrt">{{ poltShippingList.pact }}</div>
            </div>
          </div>
        </div>
        <div class="jichus">
          <div class="gesk"></div>
          <div class="jichu">配车明细</div>
        </div>
        <div class="lista">
          <el-table
            :data="tablelist"
            border
            style="width: 100%"
            height="100%"
            :header-cell-style="{ background: '#F4F4F5', color: '#303133' }"
          >
            <el-table-column
              fixed
              prop="item.date"
              label="产品型号"
              width="292"
            >
            </el-table-column>
            <el-table-column prop="item.name" label="产品编号" width="292">
            </el-table-column>
            <el-table-column prop="item.province" label="产品数量" width="292">
            </el-table-column>
            <el-table-column prop="item.city" label="要求到货时间" width="292">
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="292">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="fahuo-li" style="margin-top: 24px">
          <div class="a">
            <div class="sd">
              <div class="fa-ji">总件数</div>
              <div class="conrt">{{ poltShippingList.allTotals }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">制单人</div>
              <div class="conrt">{{ poltShippingList.madeListman }}</div>
            </div>
          </div>

          <div class="a">
            <div class="sd">
              <div class="fa-ji">发货单位电话</div>
              <div class="conrt">{{ poltShippingList.shippingPhone }}</div>
            </div>
            <div class="sd">
              <div class="fa-ji">制单时间</div>
              <div class="conrt">{{ poltShippingList.madeListTime }}</div>
            </div>
          </div>

          <div class="a">
            <div class="sd">
              <div class="fa-ji">发货单位传真</div>
              <div class="conrt">{{ poltShippingList.shippingFax }}</div>
            </div>
          </div>
          <div class="a">
            <div class="sd">
              <div class="fa-ji">打印状态</div>
              <div class="conrt">{{ poltShippingList.plotState }}</div>
            </div>
          </div>
        </div>
        <div class="queren">
          <el-button type="primary" round @click="dialogVisibleg = false"
            >打印</el-button
          >
          <el-button type="primary" round @click="dialogVisibleg = false"
            >确认</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      linkman: '',
      salesman: '',
      sectCarList: '',
      carPearson: '',
      salePhone: '',
      pact: '',
      carrier: '',
      powerPlant: '',
      linkmanPhone: '',
      carnum: '',
      allTotals: '',
      madeListman: '',
      shippingPhone: '',
      madeListTime: '',
      shippingFax: '',
      plotState: '',
      listIndex: '',
      /**打印货运单 */
      poltShippingList: {},
      /**********************************************/
      tableData: [
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "北京电站",
          city: "赵吾光",
          address: "178 2038 0191",
          zip: "重庆市南岸区长生桥镇长生路46号附1号",
        },
        {
          date: "P2112020092300",
          name: "P2112020092300",
          province: "北京电站",
          city: "赵吾光",
          address: "178 2038 0191",
          zip: "重庆市南岸区长生桥镇长生路46号附2号",
        },

      ],
      dialogVisible: false,
      dialogVisibleg: false,
      dialogVisibleq: false,
      dialogVisibleh: false,
      dialogVisibleyu: false,
      dialogImageUrl: "",
      dialogVisiblex: false,
    };
  },
  mounted() {
    console.log('111')
  },
  methods: {
    //编辑发货申请
    handleClick(row) {
      console.log(row);
    },
    //上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //查看订单
    cha() {
      this.dialogVisibleg = true;
    },
    //确认发货
    que() {
      this.dialogVisibleq = true;
    },
    //预览图片
    chuans() {
      this.dialogVisibleh = false;
      this.dialogVisibleyu = true;
    },
    //返回上一层
    fanhuis() {
      this.dialogVisibleh = false;
      this.dialogVisibleyu = true;
    },
    //* 确定编写运货单 *
    sureSafingList() {

      let safinglistObj = [
        {
          linkman: this.linkman,
          salesman: this.salesman,
          sectCarList: this.sectCarList,
          carPearson: this.carPearson,
          salePhone: this.salePhone,
          pact: this.pact,
          carrier: this.carrier,
          powerPlant: this.powerPlant,
          linkmanPhone: this.linkmanPhone,
          carnum: this.carnum,
          allTotals: this.allTotals,
          madeListman: this.madeListman,
          shippingPhone: this.shippingPhone,
          madeListTime: this.madeListTime,
          shippingFax: this.shippingFax,
          plotState: this.plotState
        }
      ]
      let listIndex = this.listIndex
      this.$store.commit('upSafingList', { safinglistObj, listIndex })
      this.linkman = '',
        this.salesman = '',
        this.sectCarList = '',
        this.carPearson = '',
        this.salePhone = '',
        this.pact = '',
        this.carrier = '',
        this.powerPlant = '',
        this.linkmanPhone = '',
        this.carnum = '',
        this.allTotals = '',
        this.madeListman = '',
        this.shippingPhone = '',
        this.madeListTime = '',
        this.shippingFax = '',
        this.plotState = '',
        this.listIndex = ''
      this.dialogVisible = false;
      this.$message({
        showClose: true,
        type: 'success',
        message: '编写成功'
      })
    },
    //编写yun'da
    safiingList(idx) {
      this.dialogVisible = true
      this.listIndex = idx
    },
    //打印货运单
    plot(idx) {
      if (this.$store.state.safiingList[idx]) {
        this.poltShippingList = this.$store.state.safiingList[idx][0]
        this.dialogVisibleg = true
      } else {
        this.$message({
          showClose: true,
          type: 'error',
          message: '还未编辑'
        })
      }

    }
  },

};
</script>
<style>
.el-dialog__title {
  font-size: 29px !important;
  color: #000000 !important;
  font-weight: 500;
}
.el-upload--picture-card {
  width: 107px !important;
  height: 107px !important;
  line-height: 107px !important;
}
.el-upload-list--picture-card .el-upload-list__item {
  width: 107px !important;
  height: 107px !important;
  line-height: 107px !important;
}
.el-carousel__container {
  margin-top: 52px;
  height: 629px;
}
</style>
<style scoped>
@import "../../css/fa.css";
</style>