<template>
  <div class="xd-detail" :class="{noBorder: !isBorder}">
    <div class="xd-detail__item" v-for="(item,index) in uiList" :key="index">
      <div :class="`xd-detail__item-title ${size}`" v-if="item.title" v-html="item.title"></div>
      <el-table
        class="xd-detail__table"
        :class="{
				'xd-detail__table-mini': size === 'mini',
				'xd-detail__table-small': size === 'small',
				'xd-detail__table-default': size === 'default',
				'noHover': noHover
			}"
        fit
        :highlight-current-row="false"
        :data="item.items"
        :show-header="false"
        :border="isBorder"
      >
        <el-table-column
          class-name="xd-detail__table-label"
          :align="!isBorder? 'right': 'center'"
          :width="labelWidth"
          prop="label"
          v-if="isBorder"
        >
          <template slot-scope="scope">
            <div>{{scope.row.label}}</div>
            <div style="color: #333;font-weight: bold;font-size: 12px" v-if="showSubLabel(scope.row)" v-html="showSubLabel(scope.row)"></div>
          </template>
        </el-table-column>
        <el-table-column
          :class-name="`xd-detail__table-label`"
          :align="!isBorder? 'right': 'center'"
          :width="labelWidth"
          prop="label"
          v-else
        >
          <div class="splitLine" slot-scope="scope" v-if="scope.row.type === 'splitLine'"></div>
          <template slot-scope="scope" v-else>
            <div>{{scope.row.label}}{{scope.row.label?':':''}}</div>
            <div style="color: #333;font-weight: bold;font-size: 12px" v-if="showSubLabel(scope.row)" v-html="showSubLabel(scope.row)"></div>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          :min-width="minWidth"
          :class-name="`xd-detail__table-cont ${size}`"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.type === 'splitLine'">
              <div class="splitLine"></div>
            </template>
            <slot v-else :name="scope.row.field" :row="scope.row" :prop="scope.row.field">
              <div class="xd-detail__table-align paddingLeft10">
                <template v-if="scope.row.type === 'product_type'">
                  <xd-radio-custom
                    style="padding-top: 10px"
                    :default-value="getRadioList(scope.row.value, true)"
                    :setting="getRadioList(scope.row.value)"
                    :disabled="true"
                  ></xd-radio-custom>
                </template>
                <template v-if="scope.row.type === 'normal'">{{scope.row.value}}</template>
                <template v-if="scope.row.type === 'html'"><div v-html="scope.row.value"></div></template>
                <template v-if="scope.row.type === 'priceAndRatio'">
                  <div class="priceAndRatio">
                    <xd-table-price
                      :price="scope.row.value[0]"
                      :unit="(scope.row.params && scope.row.params.unit[0]) ? scope.row.params.unit[0]: '元'"
                    ></xd-table-price>
                    <div>
                      <span>(</span>
                      <span class="red">{{scope.row.value[1]|getRatio(scope.row.params.unit[1])}}</span>
                      <span class="grey">{{(scope.row.params && scope.row.params.unit[1]) ? scope.row.params.unit[1]: '%'}}</span>
                      <span>)</span>
                    </div>
                  </div>
                </template>
                <template v-if="scope.row.type === 'price'">
                  <xd-table-price
                    :price="scope.row.value"
                    :unit="(scope.row.params && scope.row.params.unit) ? scope.row.params.unit: '元'"
                  ></xd-table-price>
                </template>
                <template v-if="scope.row.type === 'unit'">
                  <span class="red" :style="{color: scope.row.params.color || 'red'}">{{scope.row.value}}</span>
                  <span class="grey">{{(scope.row.params && scope.row.params.unit) ? scope.row.params.unit: ''}}</span>
                </template>
                <template v-if="scope.row.type === 'ratio'">
                  <span>{{scope.row.value|getRatio(scope.row.params && scope.row.params.unit || '%')}}</span>
                  <span class="grey">{{(scope.row.params && scope.row.params.unit) ? scope.row.params.unit: '%'}}</span>
                </template>
                <template v-if="scope.row.type === 'discount'">
                  <span>{{scope.row.value|getDiscount()}}</span>
                  <span class="grey">折</span>
                </template>
                <template v-if="scope.row.type === 'tag'">
                  <el-tag :size="size" v-for="(item,index) in scope.row.value" :key="index">{{item}}</el-tag>
                </template>
                <template v-if="scope.row.type === 'table'">
                  <xd-in-table :headers="scope.row.options.header" :list="scope.row.value"></xd-in-table>
                </template>
                <template v-if="scope.row.type === 'status'">
                  <xd-table-status
                    :size="size"
                    :status="scope.row.value"
                    :message="(scope.row.params && scope.row.params.message) ? scope.row.params.message : ['已启用', '已禁用']"
                  >
                  </xd-table-status>
                </template>
                <template v-if="scope.row.type === 'image'">
                  <xd-table-image
                    :thumb="scope.row.value"
                    :width="(scope.row.params && scope.row.params.width) ? scope.row.params.width : 113"
                    :height="(scope.row.params && scope.row.params.height) ? scope.row.params.height : 100"
                  ></xd-table-image>
                </template>
                <template v-if="scope.row.type === 'images'">
                  <xd-table-image
                    v-if="getImages(scope.row.value)"
                    :thumb="getImages(scope.row.value)"
                    :thumb-preview="getImages(scope.row.value, false)"
                    :width="(scope.row.params && scope.row.params.width) ? scope.row.params.width : 113"
                    :height="(scope.row.params && scope.row.params.height) ? scope.row.params.height : 100"
                  ></xd-table-image>
                </template>
								<template v-if="scope.row.type === 'images-list'">
									<xd-table-images
										:list="scope.row.value"
										:width="(scope.row.params && scope.row.params.width) ? scope.row.params.width : 113"
										:height="(scope.row.params && scope.row.params.height) ? scope.row.params.height : 100"
									></xd-table-images>
								</template>
								<template v-if="scope.row.type === 'product'">
									<xd-store-product
                    :list="scope.row.value"
                    :icon-type-list="scope.row.iconTypeList || []"
										:width="(scope.row.params && scope.row.params.width) ? scope.row.params.width : 113"
										:height="(scope.row.params && scope.row.params.height) ? scope.row.params.height : 100"
									></xd-store-product>
								</template>
                <template v-if="scope.row.type === 'operate'">
                  <div class="xd-detail__table-align-option">
                    <template v-for="item in scope.row.value">
                      <el-link
                        v-if="item.ui === 'link'"
                        :href="item.url"
                        :target="item.target || '_blank'"
                        :type="item.type || 'primary'"
                      >{{item.name}}</el-link>
                      <el-button
                        @click="handleBtn(scope.row,item)"
                        v-if="item.ui === 'button'"
                        :size="size"
                        :type="item.type || 'primary'">{{item.name}}
                      </el-button>
                    </template>
                  </div>
                </template>
                <template v-if="scope.row.type === 'date_price'">
                  <div class="xd-detail__table-align-option">
                    <el-button
                      @click="handleBtn(scope.row)"
                      :size="size"
                      type='primary'>查看
                    </el-button>
                  </div>
                </template>
                <template v-if="scope.row.type === 'skus'">
                  <template>{{getInitSku(scope.row.value, `product_skus_${scope.$index}`)}}</template>
                  <div :id="`product_skus_${scope.$index}`" style="width: 100%"></div>
                </template>
                <template v-if="scope.row.type === 'sku_wholesale_prices'">
                  <template>{{getInitWholesale(scope.row.value, `product_wholesale_${scope.$index}`)}}</template>
                  <div :id="`product_wholesale_${scope.$index}`" style="width: 100%"></div>
                </template>
                 <template v-if="scope.row.type === 'wholesale_prices'">
                    <div style="marginRight:20px">
                      <div>数量</div>
                      <div v-for="(item,index) in scope.row.value" :key="index">
                        <div>{{item.start}}-{{item.end}}</div>
                      </div>
                    </div>
                    <div style="marginRight:20px" v-if="scope.row.value[0].min_sale_price&&scope.row.value[0].min_sale_price!==-1">
                      <div>最低售价</div>
                      <div v-for="(item,index) in scope.row.value" :key="index">
                        <div> <span style="color:red">{{division(item.min_sale_price)}}</span> <span>元</span></div>
                      </div>
                    </div>
                    <div style="marginRight:20px" v-if="scope.row.value[0].purchase_price&&scope.row.value[0].purchase_price!==-1">
                      <div>货源进货价</div>
                      <div v-for="(item,index) in scope.row.value" :key="index">
                        <div> <span style="color:red">{{division(item.purchase_price)}}</span> <span>元</span></div>
                      </div>
                    </div>
                    <div style="marginRight:20px" v-if="scope.row.value[0].dist_price&&scope.row.value[0].dist_price!==-1">
                      <div>平台进货价</div>
                      <div v-for="(item,index) in scope.row.value" :key="index">
                        <div> <span style="color:red">{{division(item.dist_price)}}</span> <span>元</span></div>
                      </div>
                    </div>
                    <div style="marginRight:20px" v-if="scope.row.value[0].sale_price&&scope.row.value[0].sale_price!==-1">
                      <div>售价</div>
                      <div v-for="(item,index) in scope.row.value" :key="index">
                        <div> <span style="color:red">{{division(item.sale_price)}}</span> <span>元</span></div>
                      </div>
                    </div>
                    <div style="marginRight:20px" v-if="scope.row.value[0].jfb_price&&scope.row.value[0].jfb_price!==-1">
                      <div>建议售价</div>
                      <div v-for="(item,index) in scope.row.value" :key="index">
                        <div> <span style="color:red">{{division(item.jfb_price)}}</span> <span>元</span></div>
                      </div>
                    </div>
                </template>
                <template v-if="scope.row.type === 'map'">
                  <xd-baidu-search
                    style="position:relative;z-index: 100;"
                    :defaultValue="scope.row.options.map_search_address"
                    :center="[scope.row.options.longitude,scope.row.options.latitude]"
                  ></xd-baidu-search>
                </template>
                <template v-if="scope.row.params && scope.row.params.handle">
                  <div class="xd-detail__table-align-btn">
                    <el-button
                      :size="size"
                      @click.stop="handleBtn(scope.row)"
                      :type="scope.row.params.type || ''"
                    >{{scope.row.params.name || '操作'}}
                    </el-button>
                  </div>
                </template>
              </div>
            </slot>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import XdTablePrice from "@/components/XdTablePrice";
  import XdTableStatus from "@/components/XdTableStatus";
  import XdTableImage from "@/components/XdTableImage";
  import XdTableImages from "@/components/XdTableImages";
  import XdStoreProduct from "@/components/XdStoreProduct";
  import XdTable from "@/components/XdTable";
  import XdRadioCustom from "@/components/formItem/XdRadioCustom";
  import XdBaiduSearch from "@/components/XdBaiduSearch"
  import XdInTable from "@/components/XdInTable.vue";

  let $vm = null;

  export default {
    name: "XdDetail",
    components: {
      XdTablePrice,
      XdTableStatus,
      XdTableImage,
      XdTableImages,
      XdStoreProduct,
      XdTable,
      XdRadioCustom,
      XdBaiduSearch,
      XdInTable
    },
    props: {
      isBorder: {
        type: Boolean,
        default: false
      },
      isFilterEmpty:{
        type: Boolean,
        default: false
      },
      noHover: {
        type: Boolean,
        default: false
      },
      list: {
        type: Array | null,
        default: null
      },
      labelWidth: {
        type: String | Number,
        default: '100'
      },
      size: {
        type: String,
        default: 'mini' //default/mini/small
      },
			minWidth: {
        type: String,
        default: '200px'
			},
      skusHeaders:{
        type: Array|null,
        default(){
          return null
        }
      }

    },
    filters: {
      getRatio(value, unit) {
        let dived = 100;
        if ($vm.$xdHelper.checkVarType(value) === 'string') {
          value = Number(value)
        }
        if(unit === '折') dived = 1000;
        return $vm.$xdHelper.divisionFloatNumber(value, dived);
      },

      getDiscount(value) {
        let dived = 1000;
        if ($vm.$xdHelper.checkVarType(value) === 'string') {
          value = Number(value)
        }
        return $vm.$xdHelper.divisionFloatNumber(value, dived);
      }
    },
    data() {
      return {
        uiList: [],
        testData: [
          {
            title: '基础信息',
            items: [
              {label: '账号ID', value: 33, type: 'normal', field: 'id', params: {}},
              {label: '描述', value: 33, type: 'normal', field: 'desc'},
              {label: '单位', value: 33, type: 'unit', field: 'unit', params: {unit: '元'}},
              {label: '百分比', value: 8877, type: 'ratio', field: 'ratio'},
              //N/Y/true/false/0/1/2
              {label: '状态', value: 'Y', type: 'status', field: 'status', params: {message: ['已启用', '已禁用']}},
              {label: '价格', value: 25, type: 'price', field: 'price'},
              {label: '标签', value: ['价格', '类型'], type: 'tag', field: 'tag'},
              {
                label: '取票码',
                value: ['取票码:A1**1', '取票码:1**4'],
                type: 'tag',
                field: 'ticket',
                params: {
                  handle: true,
                  name: '查看',
                  type: 'default'
                }
              },
              {
                label: '展示图',
                value: [{"src": "https://admin-cake-jufubao-cn.oss-cn-beijing.aliyuncs.com/images/code.png"}, {"src": "https://admin-jufubao-cn.oss-cn-beijing.aliyuncs.com/images/auth-f.jpg"}],
                type: 'images',
                field: 'images',
                params: {width: 150, height: 150}
              },
              {
                label: '缩略图',
                value: 'https://admin-cake-jufubao-cn.oss-cn-beijing.aliyuncs.com/images/code.png',
                type: 'image',
                field: 'image',
                params: {width: 80, height: 80}
              },
              {
                label: '操作',
                value: [
                  {ui: 'link', url: '/images/code', target: '_blank', name: '查看', type: 'primary'},
                  {ui: 'button', icon: 'el-icon-delete', name: '删除', type: 'danger'},
                ],
                type: 'operate',
                field: 'operate',
              },
            ],
          },
          {
            title: '订票人信息',
            items: [
              {
                label: '手机号',
                value: 33, type: 'normal',
                field: 'iPhone',
                params: {
                  handle: true,
                  name: '获取手机号',
                  type: 'default'
                }
              },
              {label: '姓名', value: '张三', type: 'normal', field: 'name'},
              {label: '证件类型', value: '身份证', type: 'normal', field: 'type'},
              {
                label: '证件号码',
                value: '131039**********3993',
                type: 'normal',
                field: 'id_number',
                params: {
                  handle: true,
                  name: '获取证件号码',
                  type: 'default'
                }
              }
            ],
          },
          {
            title: '渠道信息',
            items: [
              {
                label: '影院渠道',
                value: '淘票票',
                type: 'normal',
                field: 'channel',
              },
              {label: '姓名', value: '张三', type: 'normal', field: 'name'},
              {label: '票源订单号', value: '2940804576465694743', type: 'normal', field: 'type'},
            ],
          }
        ],
      }
    },

    created() {
      if(this.$xdHelper.checkVarType(this.skusHeaders) === 'array'){
        this.uiSkusHeaders = this.skusHeaders
      }

      $vm = this;
      let uiList = [];
      if (this.list !== null) {
        uiList = this.list;
      }
      if(this.list === null) uiList = this.testData;

      if(this.isFilterEmpty) {
        uiList = uiList.map(item=>{
          return {
            ...item,
            items: item.items.filter((it) => {
              return it.value !== undefined || it.value !== null || it.value !== ''
            })
          }
        })
      }

      this.uiList = uiList;
    },
    methods: {

      showSubLabel(value){
        if(value.sub_label || (value.options && value.options.sub_label)) {
          let subTitle = value.sub_label;
          if(value.options && value.options.sub_label) subTitle = value.options.sub_label;
          return `（${subTitle}）`;
        }
        return null;
      },

      division(value) {
        return $vm.$xdHelper.divisionFloatNumber(value, 100);
      },
      getInitSku(value, id){
        this.JfbPage(this, id, {
          name: 'JfbProductSku',
          productSkuList: value
        });
        return ''
      },
      getInitWholesale(value, id){
        this.JfbPage(this, id, {
          name: 'JfbProductWholesale',
          productWholesaleList: value
        });
        return ''
      },
      getTableDataFromResponseData(data = []) {
        let list = this.$xdHelper.cloneDeep(data);
        return list.map((item) => {
          let {specs, stocks, sku_uniq_id, standards,product_sku} = item;
          let imgStandIndex = standards.findIndex((ss) => ss.image);
          if (imgStandIndex > -1) {
            let imgUrl = standards[imgStandIndex].image;
            standards.splice(imgStandIndex, 0, {
              attr_id: "self_" + Date.now(),
              name: "图片",
              value: "event_upload",
              image: {
                path: this.getImageFullPath(imgUrl),
                name: "6.jpg",
                url: imgUrl,
              },
            });
          }
          sku_uniq_id = standards.map((ss) => `${ss.name}=${ss.value}`).join(",");
          if (Object.keys(specs).length > 0 && 0) {
            for (let key in specs) {
              switch (key) {
                case "product_code":
                  specs[key] = specs[key];
                  break;
                case "product_bar_code":
                  specs[key] = specs[key];
                  break;
                default:
                  specs[key] = specs[key] / 100;
              }
            }
          }
          return {
            ...specs,
            ...stocks,
            sku_uniq_id,
            product_sku,
            standards,
          };
        });
      },

      getRadioList(item, isSelect = false){
        console.log('getRadioList', item)
        if(isSelect) {
          let select = item.filter(it => {
            return it.current
          });

          if(select.length > 0) return select[0].value;
          else return  ''
        }
        return {
          list: item.map(it=> {
            return it
          })
        }
      },

      handleBtn(row, btn = null) {
        this.$emit('onCustom', {row, btn});
      },

      getImages(value, type = true) {
        let image = [];
        if (value) {
          if (this.$xdHelper.checkVarType(value) === 'array') {
            image = value
          } else if (this.$xdHelper.checkVarType(value) === 'string') {
            try {
              image = JSON.parse(value);
            } catch (e) {
              image = [value]
            }
          }
        }
        if (image.length === 0) return null;
        if (type) return image[0];
        else return image
      }
    }
  }
</script>

<style scoped lang="scss">
  .splitLine {
    margin: 5px 0;
    height: 1px;
    background: #f4f4f4;
  }

  .paddingLeft10 {
    padding-left: 10px;
  }

  .grey {
    color: #999;
    padding-left: 5px;
  }

  .noBorder {
    ::v-deep td {
      border: 0;
    }

    & ::v-deep ::before {
      height: 0;
    }
  }

	.noHover ::v-deep tr:hover td {
		background: #fff!important;
	}

  .priceAndRatio {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    & > *:first-child {
      margin-right: 10px;
    }
  }

  .xd-detail {

    &__item {
      &-title {
        border-radius: 8px;
        background: #F5F7FA;
        padding: 10px;
        color: rgba(144, 147, 153, 1);
        margin: 20px 0;

        &.default {
          padding: 15px 20px;
        }

        &.mini {
          padding: 10px 20px;
        }

        &.small {
          padding: 10px 20px;
        }
      }

      &:first-child {
        &-title {
          margin-top: 0;
        }
      }
    }

    &__table {

      &-align {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #333;
        flex-flow: wrap;


        &-option {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-flow: wrap;

          & > * {
            margin: 5px 10px 5px 0;
          }
        }

        &-btn {
          padding-top: 0;
          margin-left: 30px;
        }

        ::v-deep .el-tag {
          margin-right: 10px;
        }
      }

      &-default {
        ::v-deep .el-button {
          padding: 8px 16px;
        }

        ::v-deep .xd-detail__table-label {
          font-size: 14px;
          color: #666;
          line-height: 20px;
        }

        ::v-deep .xd-detail__table-label.handle {
          vertical-align: top;
        }

        ::v-deep td {
          padding: 10px 0;
        }

        ::v-deep td .cell {
          line-height: 20px;
          padding: 0;
        }
      }

      &-mini {
        ::v-deep .el-button {
          padding: 6px 10px;
        }

        ::v-deep .xd-detail__table-label {
          font-size: 13px;
          color: #666;
          line-height: 18px;
        }

        ::v-deep .xd-detail__table-label.handle {
          vertical-align: top;
        }

        ::v-deep td {
          padding: 5px 0;
        }

        ::v-deep td .cell {
          line-height: 18px;
					font-size: 13px;
          padding: 0;
        }
      }

      &-small {
        ::v-deep .xd-detail__table-label {
          font-size: 12px;
          color: #666;
          line-height: 16px;
        }

        ::v-deep .el-button {
          padding: 3px 7px;
        }

        ::v-deep .xd-detail__table-label.handle {
          vertical-align: top;
        }

        ::v-deep td {
          padding: 2px 0;
        }

        ::v-deep td .cell {
          line-height: 16px;
					font-size: 12px;
          padding: 0;
        }
      }
    }
  }

	@media screen and (max-width: 768px) {
		.xd-detail {
			&__table {
				&-align {
					&-btn {
						width: 100%;
						padding-top: 5px;
						margin-left:0;
					}
				}
			}
		}
	}
</style>
