<template>
  <div class="containerSty">
    <div class="topTitle">
      <div>已选商品</div>
    </div>
    <div style="margin-top: 15px;">
      <el-table :data="productListData" size="mini" border v-loading="productLoading">
        <el-table-column prop="fTp" label="商品"  align="center" min-width="200px" :show-overflow-tooltip="true">
          <template slot-scope="scope" >
            <div style="display: flex;align-items: center">
              <el-image
                v-if="scope.row.fTp"
                style="min-width: 80px; min-height: 80px;"
                :src="scope.row.fTp"
                :preview-src-list="[scope.row.fTp]"
              >
              </el-image>
              <div style="margin-left: 15px;flex:1; display: flex;flex-wrap: wrap;">
                <div style="width: 100%;text-align: left;">{{scope.row.fMc}}</div>
                <div style="width: 100%;text-align: left;">{{scope.row.fMs}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="fJg" label="单价"  align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="num" :label="`数量`" min-width="125px" align="center"  >
          <template slot-scope="scope" >
            <el-input-number  size="mini" class="numberCen" :disabled="scope.row.id == ''" :precision="0" v-model.number="scope.row['num']"  @change="handleNumberChange" :min="1" :max="99" placeholder="数量" label="数量"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="操作"  width="150" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini"  @click="handleChoseProduct(scope.row,scope.$index,'chooseProduct')">选择商品</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-form  :model="form" ref="form" :rules="formRules" label-width="82px">
          <el-form-item label="配送方式:" prop="psfs">
            <el-select v-model="form.psfs" style="width: 100%"   clearable placeholder="请选择">
              <el-option
                v-for="item in psfsOptions"
                :key="item.KEY_"
                :label="item.NAME_"
                :value="item.KEY_">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单备注:">
            <el-input v-model="form.bz" type="textarea" :rows="2"  style="width: 100%" clearable placeholder="请输入订单备注"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24" style="border: 1px solid #dcdfe6;padding: 20px">
        <div style="display: flex">
          <div >
            商品金额：
            <span style="color: #ea5504">{{form.spje}}</span>
          </div>
<!--          <div style="margin-left: 40px">-->
<!--            气瓶押金：-->
<!--            <span  style="color: #ea5504">{{form.qpyj}}</span>-->
<!--          </div>-->
        </div>
      </el-col>
    </el-row>
    <el-dialog title="选择商品" :visible.sync="dialogTableVisible" width="600px" >
      <el-table :data="chooseProductList" v-loading="loading" height="600px">
        <el-table-column property="date" label="商品" >
          <template slot-scope="scope">
            <div style="display: flex;align-items: center">
              <el-image
                style="min-width: 80px; min-height: 80px;"
                :src="scope.row.fTp"
                :preview-src-list="[scope.row.fTp]"
              >
              </el-image>
              <div style="margin-left: 15px; display: flex;flex-wrap: wrap;">
                <div>{{scope.row.fMc}}</div>
                <div>{{scope.row.fMs}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column property="fJg" label="单价" width="80"></el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini"  @click="handleChoseProduct(scope.row,scope.$index,'choose')">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { getDict } from '@/api/common.js'
import {gasBootleInfo} from '@/api/orderManage'
export default {
  name: "bxd",
  data(){
    return {
      formRules:{
        psfs:[
          {required:true,message:'请选择配送方式',trigger:'change'}
        ],
      },
      form:{
        qplxID:'',
        spje:'',
        qpyj:'222',
        zj:'',
        bz:'',
        psfs:'',
        num:''
      },
      dialogTableVisible:false,
      chooseProductList:[],
      loading: true,
      psfsOptions:[],
      productLoading:false,
      productListData:[
        {
          id:'',
          fTp:'',
          fMc:'',
          num:1,
          fJg:'',
          fMs:''
        }
      ]
    }
  },
  watch:{

  },
  created() {
    this.initData();
  },
  methods:{
    async initData(){
      let query = [{
        key: 'NAME_',
        value: '配送方式'
      }]
      await getDict(query).then((res)=>{
        console.log('打印res====》',res);
        const { rows } = res;
        this.psfsOptions = rows;
      });
    },
    resetForm(){
      this.productListData =[
        {
          id:'',
          fTp:'',
          fMc:'',
          num:1,
          fJg:'',
          fMs:''
        }
      ];
      this.form.bz = '';
      this.form.psfs = '';
      this.form.spje = '';
    },
    async getGasBottleList(){
      this.loading = true;
      await gasBootleInfo().then((res)=>{
        const { value } = res;
        const { fqplxList } = value;
        this.chooseProductList =fqplxList;
        this.chooseProductList.map(async (item)=>{
          let gasStationImg = JSON.parse(item.fTp);
          let gasStationUrl = await this.$getPhotoUrl(gasStationImg[0].response.fileId);
          item.fTp = gasStationUrl;
          this.$forceUpdate();
        });
        this.loading = false;
        console.log('打印gasStationImg', this.chooseProductList);
      })
    },
    onSubmit(){
      let validFlag = false;
      this.$refs.form.validate((valid) => {
        if (valid) {
          validFlag = true;
        } else {
          validFlag = false;
        }
      });
      return validFlag;
    },
    onReset(){
      this.$refs.form.resetFields();
    },
    handleChoseProduct(row,index,type){
      switch (type){
        case 'chooseProduct':
          this.dialogTableVisible = true;
          this.getGasBottleList();
          break;
        case 'choose':
          this.dialogTableVisible = false;
          this.productLoading = true;
          console.log('打印row', row);
          this.productListData[0].id=row.id;
          this.productListData[0].fJg = row.fJg;
          this.productListData[0].fMc=row.fMc;
          this.productListData[0].fTp = row.fTp;
          this.productListData[0].fMs = row.fMs;
          this.form.spje = row.fJg;
          this.form.zj = row.fJg;
          this.form.qplxID = row.id;
          this.form.num = this.productListData[0].num;
          this.$emit('dqdFormSubmit',this.form);
          this.productLoading = false;
          break;
      }

    },
    handleNumberChange(val){
      this.form.spje = this.multiplyAndKeepTwoDecimals(val, this.productListData[0].fJg);
      this.form.zj = this.form.spje;
      this.form.num = this.productListData[0].num;
      this.$emit('dqdFormSubmit',this.form);
    },
    multiplyAndKeepTwoDecimals(num1, num2) {
      return parseFloat((num1 * num2).toFixed(2));
    }
  }
}
</script>

<style lang="scss" scoped>
.containerSty{
  height: 100%;
  background-color: #ffffff;
  .topTitle{
    display: flex;
    justify-content: space-between;
  }
}
</style>